代码更新
This commit is contained in:
parent
48e28824c0
commit
cec9c9720e
64
App.vue
64
App.vue
|
|
@ -148,7 +148,7 @@
|
|||
that.getConfigData()
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
this.checknetwork()
|
||||
|
||||
|
||||
jpushModule.setLoggerEnable(true);
|
||||
jpushModule.initJPushService()
|
||||
|
|
@ -247,67 +247,7 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
//网络检测
|
||||
checknetwork() {
|
||||
|
||||
uni.onNetworkStatusChange(function(res) {
|
||||
|
||||
if (res.isConnected) {
|
||||
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
|
||||
} else {
|
||||
|
||||
uni.showModal({
|
||||
|
||||
title: '系统提示',
|
||||
|
||||
content: '当前设备无网络或网络较差',
|
||||
|
||||
cancelText: '取消',
|
||||
|
||||
confirmText: '确定',
|
||||
|
||||
success: (res) => {
|
||||
|
||||
if (res.confirm) {
|
||||
|
||||
uni.reLaunch({
|
||||
|
||||
url: '/pages/index/index'
|
||||
|
||||
})
|
||||
|
||||
} else {
|
||||
|
||||
// #ifdef H5
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/login/login_copy'
|
||||
})
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
|
||||
plus.runtime.quit()
|
||||
|
||||
// #endif
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ let httpApiThree
|
|||
// let httpApi = 'http://192.168.31.110:8324' // 测试
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
// httpApi = 'https://shop.lihaink.cn' // 生产
|
||||
// httpApi = 'https://test.shop.lihaink.cn' //预发布环境
|
||||
|
||||
httpApi = "https://crmeb-test.shop.lihaink.cn"
|
||||
// httpApi = "http://192.168.0.222"
|
||||
// httpApi = "http://192.168.0.108:8325"
|
||||
|
|
@ -25,7 +27,9 @@ if (process.env.NODE_ENV === "development") {
|
|||
|
||||
// #endif
|
||||
} else if (process.env.NODE_ENV === 'production') {
|
||||
httpApi = 'https://shop.lihaink.cn' // 生产
|
||||
// httpApi = 'https://shop.lihaink.cn' // 生产
|
||||
|
||||
httpApi ='https://test.shop.lihaink.cn' //预发布环境
|
||||
|
||||
// httpApi = "https://crmeb-test.shop.lihaink.cn"
|
||||
httpApiTwo = 'https://nk.lihaink.cn' // 生产
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"name" : "惠农生活",
|
||||
"appid" : "__UNI__3A527D1",
|
||||
"description" : "",
|
||||
"versionName" : "1.4.1",
|
||||
"versionCode" : 141,
|
||||
"versionName" : "1.3.9",
|
||||
"versionCode" : 139,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
|
|
|||
11
pages.json
11
pages.json
|
|
@ -28,6 +28,14 @@
|
|||
// },
|
||||
// // #endif
|
||||
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/moreProject/moreProject",
|
||||
"style": {
|
||||
"navigationBarTitleText": "更多功能",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
|
|
@ -148,7 +156,8 @@
|
|||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "pages/goods_cate",
|
||||
"name": "goods_cate",
|
||||
"pages": [{
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<view class="cont">
|
||||
<!-- <view v-html="agreement"></view> -->
|
||||
<jyf-parser :html="agreement" ref="article" :tag-style="tagStyle"></jyf-parser>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAgreementApi
|
||||
} from '@/api/user.js';
|
||||
import parser from "@/components/jyf-parser/jyf-parser";
|
||||
export default {
|
||||
components: {
|
||||
"jyf-parser": parser,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
agreement: '',
|
||||
tagStyle: {
|
||||
img: 'width:100%;display:block;'
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.memberCard();
|
||||
},
|
||||
methods: {
|
||||
memberCard() {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
let that = this
|
||||
getAgreementApi('sys_svip').then(res => {
|
||||
that.agreement = res.data.sys_svip
|
||||
uni.hideLoading();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
padding-top: 60rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.cont {
|
||||
padding: 50rpx 30rpx;
|
||||
}
|
||||
/deep/img{
|
||||
max-width: 100%!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<view class="vipGrade">
|
||||
<view class="headerBg">
|
||||
<view class="header" v-if="info.user">
|
||||
<view class="top acea-row row-middle">
|
||||
<view class="pictrue">
|
||||
<image :src="info.user.avatar"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name acea-row row-middle">
|
||||
<view class="nameCon line1">{{info.user.nickname}}</view>
|
||||
<view v-if="info.level_info.grade" class="num">lv.{{info.level_info.grade}}</view>
|
||||
</view>
|
||||
<view class="idNum">ID：{{info.user.uid}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list acea-row row-around row-middle">
|
||||
<view class="item">
|
||||
<view class="num">{{info.user.now_money}}</view>
|
||||
<view>余额</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">{{info.user.integral}}</view>
|
||||
<view>积分</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">{{ info.level_info.discount ? parseFloat(info.level_info.discount)/10 : '0'}}</view>
|
||||
<view>折扣</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrCode">
|
||||
<view class="header acea-row row-between-wrapper">
|
||||
<view class="title" :class="{'on': codeIndex == index,'onLeft':codeIndex == 1}"
|
||||
v-for="(item, index) in codeList" :key="index" @click="tapCode(index)">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="acea-row row-center-wrapper" style="margin-top: 35rpx;">
|
||||
<w-qrcode :options="config.qrc" @generate="hello"></w-qrcode>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store acea-row row-between-wrapper" v-if="storeList.length">
|
||||
<view class="title">
|
||||
<text class="iconfont icon-mendian1"></text>
|
||||
附近门店
|
||||
</view>
|
||||
<view class="acea-row" @click="goMap">
|
||||
距 <view class="storeName line1">{{storeList[0].name}}</view> {{storeList[0].range}}km<text class="iconfont icon-gengduo3"></text></view>
|
||||
</view>
|
||||
<home v-if="navigation"></home>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import home from '@/components/home/index.vue'
|
||||
|
||||
import {
|
||||
getlevelInfo,
|
||||
getRandCode
|
||||
} from '@/api/user.js';
|
||||
import {
|
||||
storeListApi
|
||||
} from "@/api/store";
|
||||
export default {
|
||||
components: {
|
||||
home
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info:{},
|
||||
codeList: [{
|
||||
name: '付款码'
|
||||
}, {
|
||||
name: '核销码'
|
||||
}],
|
||||
codeIndex:0,
|
||||
config: {
|
||||
qrc: {
|
||||
code: '',
|
||||
size: 380, // 二维码大小
|
||||
level: 3, //等级 0～4
|
||||
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
||||
border: {
|
||||
color: ['#eee', '#eee'], //边框颜色支持渐变色
|
||||
lineWidth: 1, //边框宽度
|
||||
},
|
||||
color: ['#333', '#333'], //边框颜色支持渐变色
|
||||
}
|
||||
},
|
||||
user_latitude: 0,
|
||||
user_longitude: 0,
|
||||
storeList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.levelInfo();
|
||||
this.getCode();
|
||||
try {
|
||||
this.user_latitude = uni.getStorageSync('user_latitude');
|
||||
this.user_longitude = uni.getStorageSync('user_longitude');
|
||||
} catch (e) {}
|
||||
},
|
||||
onReady() {},
|
||||
onShow() {
|
||||
uni.removeStorageSync('form_type_cart');
|
||||
},
|
||||
mounted() {
|
||||
if (this.user_latitude && this.user_longitude) {
|
||||
this.getList();
|
||||
} else {
|
||||
this.selfLocation();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goMap(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/map/index'
|
||||
})
|
||||
},
|
||||
selfLocation() {
|
||||
let self = this
|
||||
// #ifdef H5
|
||||
if (self.$wechat.isWeixin()) {
|
||||
self.$wechat.location().then(res => {
|
||||
this.user_latitude = res.latitude;
|
||||
this.user_longitude = res.longitude;
|
||||
uni.setStorageSync('user_latitude', res.latitude);
|
||||
uni.setStorageSync('user_longitude', res.longitude);
|
||||
self.getList();
|
||||
})
|
||||
} else {
|
||||
// #endif
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
try {
|
||||
this.user_latitude = res.latitude;
|
||||
this.user_longitude = res.longitude;
|
||||
uni.setStorageSync('user_latitude', res.latitude);
|
||||
uni.setStorageSync('user_longitude', res.longitude);
|
||||
} catch {}
|
||||
self.getList();
|
||||
},
|
||||
complete: function() {
|
||||
self.getList();
|
||||
}
|
||||
});
|
||||
// #ifdef H5
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
// 获取门店列表数据
|
||||
getList: function() {
|
||||
let data = {
|
||||
latitude: this.user_latitude || "", //纬度
|
||||
longitude: this.user_longitude || "", //经度
|
||||
page: 1,
|
||||
limit: 1
|
||||
};
|
||||
storeListApi(data)
|
||||
.then(res => {
|
||||
this.storeList = res.data.list.list;
|
||||
})
|
||||
.catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
})
|
||||
});
|
||||
},
|
||||
getCode() {
|
||||
getRandCode().then(res => {
|
||||
let code = res.data.code;
|
||||
this.config.qrc.code = code;
|
||||
}).catch(err => {
|
||||
return this.$util.Tips(err);
|
||||
})
|
||||
},
|
||||
levelInfo(){
|
||||
getlevelInfo().then(res=>{
|
||||
this.info = res.data;
|
||||
}).catch(err=>{
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
tapCode(index) {
|
||||
this.codeIndex = index;
|
||||
if (index == 0) {
|
||||
this.getCode();
|
||||
} else {
|
||||
let code = this.info.user.bar_code;
|
||||
this.config.qrc.code = code;
|
||||
}
|
||||
},
|
||||
hello(res) {
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background: linear-gradient(121deg, #F5EBE1 0%, #FFDFBE 100%);
|
||||
}
|
||||
.vipGrade{
|
||||
.headerBg{
|
||||
background: url('../static/big-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 476rpx;
|
||||
padding-top: 1rpx;
|
||||
.header{
|
||||
background: url('../static/grade-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 690rpx;
|
||||
height: 286rpx;
|
||||
margin: 26rpx auto;
|
||||
padding: 28rpx 28rpx 0 28rpx;
|
||||
.top{
|
||||
.pictrue{
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border: 1px solid #FFFFFF;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 50%;
|
||||
image{
|
||||
border-radius: 50%;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
width: 400rpx;
|
||||
.name{
|
||||
.nameCon{
|
||||
color: #EDCAAC;
|
||||
font-size: 28rpx;
|
||||
max-width: 332rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.num{
|
||||
border-radius: 4px;
|
||||
border: 1px solid #EDCAAC;
|
||||
background: rgba(215,177,144,0.2);
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #EDCAAC;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
}
|
||||
.idNum{
|
||||
font-weight: 400;
|
||||
color: #EDCAAC;
|
||||
font-size: 24rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
margin-top: 46rpx;
|
||||
.item{
|
||||
color: #EDCAAC;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
.num{
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.qrCode{
|
||||
width: 690rpx;
|
||||
height: 700rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
margin: -134rpx auto 0 auto;
|
||||
padding-top: 60rpx;
|
||||
.header{
|
||||
width: 330rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #EEEEEE;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
margin: 0 auto;
|
||||
.title {
|
||||
width: 146rpx;
|
||||
height: 100%;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
padding-right: 20rpx;
|
||||
|
||||
&.onLeft {
|
||||
padding-left: 34rpx;
|
||||
}
|
||||
|
||||
&.on {
|
||||
width: 170rpx;
|
||||
background-color: #333 !important;
|
||||
color: #fff;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.store{
|
||||
width: 690rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(90deg, #FFAE49 0%, #FCC887 100%);
|
||||
border-radius: 18rpx;
|
||||
margin: 26rpx auto;
|
||||
padding: 0 30rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
.iconfont{
|
||||
margin-right: 20rpx;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.icon-gengduo3{
|
||||
font-size: 24rpx;
|
||||
margin-left: 5rpx;
|
||||
margin-right: 0;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.storeName{
|
||||
display: inline-block;
|
||||
max-width: 284rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<web-view class="web-view" :webview-styles="webviewStyles" :src="url" :style="{width: windowW + 'px', height: windowH + 'px'}"></web-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
windowH: 0,
|
||||
windowW: 0,
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.url = decodeURIComponent(option.url);
|
||||
try {
|
||||
const res = uni.getSystemInfoSync();
|
||||
this.windowW = res.windowWidth;
|
||||
this.windowH = res.windowHeight;
|
||||
} catch (e) {
|
||||
// error
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<view class="lottie-bg">
|
||||
<view id="lottie">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import dayjs from "@/plugin/dayjs/dayjs.min.js";
|
||||
import wechat from "@/libs/wechat";
|
||||
import {
|
||||
getUserInfo
|
||||
} from "@/api/user";
|
||||
export default {
|
||||
name: "Auth",
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
let that = this
|
||||
const {
|
||||
code,
|
||||
state
|
||||
} = option;
|
||||
wechat.auth(code, state)
|
||||
.then(() => {
|
||||
// console.log(decodeURIComponent(decodeURIComponent(option.back_url)),'back_url')
|
||||
const href = decodeURIComponent(decodeURIComponent(option.back_url))
|
||||
location.replace(href)
|
||||
})
|
||||
.catch((err) => {
|
||||
location.replace("/");
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.lottie-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#lottie {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<view :style="viewColor">
|
||||
<form report-submit='true'>
|
||||
<view v-if="userInfo">
|
||||
<view class="user-info">
|
||||
<image class="image" :src="userInfo.user.avatar || '/static/images/f.png'"></image>
|
||||
<text>{{userInfo.user.nickname}}</text>
|
||||
</view>
|
||||
<view class="customerInfo">
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<view class="text">备注昵称</view>
|
||||
<view class="input">
|
||||
<input type='text' v-model="userInfo.mark" placeholder="请输入"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" v-if="userInfo.user.phone">
|
||||
<view class="text">手机号</view>
|
||||
<view class="input">
|
||||
{{userInfo.user.phone}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="text">推广员</view>
|
||||
<view class="input">
|
||||
{{userInfo.user.is_promoter ? '是' : '否'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button form-type="submit" @click="saveMark" class="confirmBnt">确认</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { serviceUser, serviceSaveMark } from '@/api/user.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null,
|
||||
merId: '',
|
||||
uid: '',
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin', 'viewColor']),
|
||||
onLoad(options) {
|
||||
this.mer_id = options.mer_id;
|
||||
this.uid = options.uid;
|
||||
this.serviceUser()
|
||||
},
|
||||
methods: {
|
||||
saveMark() {
|
||||
if(this.loading) return ;
|
||||
this.loading = true;
|
||||
serviceSaveMark(this.mer_id, this.uid, this.userInfo.mark).then(res=>{
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '保存成功'
|
||||
})
|
||||
setTimeout(v=>{
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
}).catch(err=>{
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
}).finally(e=>{
|
||||
setTimeout(e=>{
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
serviceUser() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
serviceUser(this.mer_id, this.uid).then(res => {
|
||||
this.userInfo = res.data
|
||||
}).catch(err=>{
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(v=>{
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
}).finally(e=>{
|
||||
uni.hideLoading()
|
||||
})
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.customerInfo{
|
||||
background: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.customerInfo .phone {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.customerInfo .list {
|
||||
width: 650rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.customerInfo .list .item {
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
.customerInfo .list .item .title {
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
|
||||
}
|
||||
.customerInfo .list .item .text{
|
||||
width: 160rpx;
|
||||
}
|
||||
.customerInfo .list .item .input {
|
||||
width: 100%;
|
||||
margin-left: 60rpx;
|
||||
color: #666666;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.customerInfo .list .item input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.confirmBnt {
|
||||
font-size: 32rpx;
|
||||
width: 650rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
color: #fff;
|
||||
margin: 70rpx auto 0 auto;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
background-color: var(--view-theme);
|
||||
}
|
||||
.user-info{
|
||||
padding: 50rpx 30rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
.image{
|
||||
width: 111rpx;
|
||||
height: 111rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
text{
|
||||
margin-left: 24rpx;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,307 @@
|
|||
<template>
|
||||
<div class="CustomerList" :style="viewColor">
|
||||
<view>
|
||||
<block v-if="type == 0 && list.length>0" v-for="(item,index) in list" :key="index">
|
||||
<div v-if="item.merchant" class="item acea-row" @click="goPage(item)">
|
||||
<view class="logo">
|
||||
<image :src="item.merchant && item.merchant.mer_avatar" mode=""></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name">{{item.merchant ? item.merchant.mer_name : ''}}</view>
|
||||
<view class="con line1" v-if="item.last && item.last.msn_type == 1">{{item.last.msn}}</view>
|
||||
<view class="con line1" v-if="item.last && item.last.msn_type == 2">[表情]</view>
|
||||
<view class="con line1" v-if="item.last && item.last.msn_type == 3">[图片]</view>
|
||||
<view class="con line1" v-if="item.last && item.last.msn_type == 4">[商品]</view>
|
||||
<view class="con line1" v-if="item.last && (item.last.msn_type == 5 || item.last.msn_type == 6)">[订单]</view>
|
||||
</view>
|
||||
<view class="right-box">
|
||||
<view class="time">{{item.last && item.last.create_time.split(' ')[1] || ''}}</view>
|
||||
<view class="num" v-if="item.num>0">{{item.num}}</view>
|
||||
</view>
|
||||
</div>
|
||||
</block>
|
||||
<block v-if="type == 1 && list.length>0" v-for="(item,index) in list" :key="index">
|
||||
<div class="item acea-row" @click="goPage(item)">
|
||||
<view class="logo">
|
||||
<image :src="(item.user && item.user.avatar) ? item.user.avatar : '/static/images/f.png'" mode=""></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name">{{item.user && item.user.nickname}}</view>
|
||||
<view class="con line1" v-if="item.last && item.last.msn_type == 1">{{item.last.msn}}</view>
|
||||
<view class="con line1" v-if="item.last && item.last.msn_type == 2">[表情]</view>
|
||||
<view class="con line1" v-if="item.last && item.last.msn_type == 3">[图片]</view>
|
||||
<view class="con line1" v-if="item.last && (item.last.msn_type == 4 || item.last.msn_type == 7)">[商品]</view>
|
||||
<view class="con line1" v-if="item.last && (item.last.msn_type == 5 || item.last.msn_type == 6)">[订单]</view>
|
||||
</view>
|
||||
<view class="right-box">
|
||||
<view class="time">{{item.last && item.last.create_time.split(' ')[1]}}</view>
|
||||
<view class="num" v-if="item.num>0">{{item.num}}</view>
|
||||
</view>
|
||||
</div>
|
||||
</block>
|
||||
<block v-if="list.length == 0">
|
||||
<emptyPage title="暂无数据~"></emptyPage>
|
||||
</block>
|
||||
</view>
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import emptyPage from '@/components/emptyPage.vue'
|
||||
import authorize from '@/components/Authorize';
|
||||
import {
|
||||
serviceList,
|
||||
serviceUserList
|
||||
} from "@/api/user";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
name: "CustomerList",
|
||||
components:{
|
||||
emptyPage,
|
||||
authorize
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
productId: 0,
|
||||
orderId: "",
|
||||
type: 0 ,// 0 用户 1客服
|
||||
timer: null,
|
||||
page:1,
|
||||
limit:9999,
|
||||
mer_id: '',
|
||||
loading: false,
|
||||
clear: false,
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin','viewColor']),
|
||||
onLoad(optios) {
|
||||
this.type = optios.type;
|
||||
this.mer_id = optios.mer_id;
|
||||
if(this.isLogin){
|
||||
this.getList(this.mer_id)
|
||||
} else {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}
|
||||
},
|
||||
onShow(option) {
|
||||
if(this.isLogin){
|
||||
this.liveUpdate();
|
||||
} else {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}
|
||||
},
|
||||
onHide(){
|
||||
if(this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
this.clear = true;
|
||||
},
|
||||
onUnload() {
|
||||
if(this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
this.clear = true;
|
||||
},
|
||||
methods: {
|
||||
onLoadFun() {
|
||||
this.isShowAuth = false;
|
||||
this.getList(this.mer_id);
|
||||
this.liveUpdate();
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
getList(mer_id) {
|
||||
this.loading = true;
|
||||
if(this.type == 0){
|
||||
serviceList({
|
||||
page:this.page,
|
||||
limit:this.limit
|
||||
}).then(res => {
|
||||
this.list = res.data.list;
|
||||
if(res.status == 400){
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
return this.$util.Tips({
|
||||
title: res.message
|
||||
})
|
||||
}
|
||||
}).finally(v=>{
|
||||
this.loading = false;
|
||||
return this.$util.Tips({
|
||||
title: v
|
||||
})
|
||||
}).catch(err => {
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
})
|
||||
});
|
||||
}else{
|
||||
serviceUserList(mer_id,{
|
||||
page:this.page,
|
||||
limit:this.limit
|
||||
}).then(res =>{
|
||||
this.list = res.data.list;
|
||||
if(res.status == 400){
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
return this.$util.Tips({
|
||||
title: res.message
|
||||
})
|
||||
}
|
||||
}).finally(v=>{
|
||||
this.loading = false;
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
return this.$util.Tips({
|
||||
title: v
|
||||
})
|
||||
}).catch(err => {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
//实时刷新列表
|
||||
liveUpdate(){
|
||||
let that = this;
|
||||
this.clear = false;
|
||||
if(that.timer) {
|
||||
clearInterval(that.timer);
|
||||
that.timer = null;
|
||||
}
|
||||
that.timer = setInterval(function(){
|
||||
if(that.clear){
|
||||
clearInterval(that.timer);
|
||||
return ;
|
||||
}
|
||||
// 用户
|
||||
(!that.loading) && that.getList(that.mer_id);
|
||||
},5000);
|
||||
},
|
||||
goPage(item) {
|
||||
item.num = 0;
|
||||
if(this.type == 0){
|
||||
uni.navigateTo({
|
||||
url: `/pages/chat/customer_list/chat?mer_id=${item.mer_id}`
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url: `/pages/chat/customer_list/chat?userId=${item.user.uid}&mer_id=${item.mer_id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
changeTitle(e) {
|
||||
this.mer_id = e.detail.value.toString();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.CustomerList {
|
||||
.spin {
|
||||
display: block;
|
||||
transform: rotate(180deg);
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.popupn{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #ffffff;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
z-index: 100;
|
||||
.title{
|
||||
max-width: 560rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
.iconfont{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
right: 0;
|
||||
}
|
||||
.mer_logo{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
position: relative;
|
||||
top: 6rpx;
|
||||
right: 10px;
|
||||
}
|
||||
.mer_name{
|
||||
display: inline-block;
|
||||
max-width: 650rpx;
|
||||
}
|
||||
.invoice-content{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.list_count{
|
||||
margin-top: 104rpx;
|
||||
}
|
||||
.item {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
.logo image{
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info{
|
||||
width: 334rpx;
|
||||
margin-left: 20rpx;
|
||||
.con{
|
||||
margin-top: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.right-box{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
font-size: 20rpx;
|
||||
color: #BBBBBB;
|
||||
.time{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.num{
|
||||
min-width: 6px;
|
||||
background-color: var(--view-theme);
|
||||
border-radius: 15px;
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,927 @@
|
|||
<template>
|
||||
<view :style="viewColor">
|
||||
<view class='productList'>
|
||||
<view class='search acea-row row-between-wrapper'>
|
||||
<!--#ifdef H5-->
|
||||
<view class="back" @click='set_where(1)'>
|
||||
<view class="iconfont icon-xiangzuo"></view>
|
||||
</view>
|
||||
<!--#endif-->
|
||||
<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
|
||||
<input placeholder='输入商品名称搜索' placeholder-class='placeholder' confirm-type='search' name="search" :value='where.keyword'
|
||||
@confirm="searchSubmit"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-wrapper">
|
||||
<view class='nav acea-row row-middle'>
|
||||
<view class='item' @click="downStatus = !downStatus" :class="{'t-color':downKey>0 && firstKey == 0}">
|
||||
{{downMenu[downKey].title}}
|
||||
<text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text>
|
||||
<text v-else class="iconfont icon-xiala1"></text>
|
||||
</view>
|
||||
<view class='item' :class="{'t-color':firstKey == 3}" @click='set_where(3)'>
|
||||
销量
|
||||
</view>
|
||||
<view class='item' :class="{'t-color':firstKey == 2}" @click='set_where(2)'>
|
||||
价格
|
||||
<image v-if="price==1" :src="domain+'/static/diy/up'+keyColor+'.png'"></image>
|
||||
<image v-else-if="price==2" :src="domain+'/static/diy/down'+keyColor+'.png'"></image>
|
||||
<image v-else src='/static/images/horn.png'></image>
|
||||
</view>
|
||||
<!-- down -->
|
||||
<view class='item' :class="{'t-color':firstKey == 4}" @click='bindRight'>
|
||||
筛选
|
||||
<text class="iconfont icon-shaixuan"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block>
|
||||
<view class="container">
|
||||
<view v-if="productList.length>0" class="coupon_count acea-row">
|
||||
<text class="text">以下商品适用于</text>
|
||||
<text class="coupon_used" :style="{ 'background-image': `url(${domain}/static/diy/coupon${keyColor}.png)` }">满{{couponData.use_min_price}}减{{couponData.coupon_price}}</text>
|
||||
</view>
|
||||
<!-- 商品 -->
|
||||
<view class='list acea-row row-between-wrapper on'>
|
||||
<view class='item on' hover-class='none' v-for="(item,index) in productList" :key="index"
|
||||
@click="godDetail(item)">
|
||||
<view class='pictrue on'>
|
||||
<image :src='item.image' class="on"></image>
|
||||
</view>
|
||||
<view class='text on acea-row row-between-wrapper'>
|
||||
<view class='name line1'>
|
||||
<text class="text_name line1">{{item.store_name}}</text>
|
||||
</view>
|
||||
<view class="item_bot">
|
||||
<view class="acea-row">
|
||||
<view class='money t-color on'>
|
||||
￥<text class='num'>{{item.price}}</text>
|
||||
</view>
|
||||
<view v-if="item.show_svip_info.show_svip_price && item.svip_price" class="acea-row row-middle svip-count">
|
||||
<text class='vip-money'>￥{{item.svip_price}}</text>
|
||||
<view class="vipImg">
|
||||
<image src="/static/images/svip.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="item_tags acea-row">
|
||||
<text v-if="item.merchant.type_name && item.product_type == 0" class="font-bg-red">{{item.merchant.type_name}}</text>
|
||||
<text v-else-if="item.merchant.is_trader && item.product_type == 0" class="font-bg-red">自营</text>
|
||||
<text v-if="item.product_type != 0" :class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
|
||||
<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
|
||||
<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
|
||||
</view>
|
||||
<view class="score">{{item.rate}}评分 {{item.reply_count}}条评论</view>
|
||||
<view class="company" v-if="item.merchant" @click.stop="goShop(item.mer_id)">
|
||||
<text class="line1">{{item.merchant.mer_name}}</text>
|
||||
<view class="flex">
|
||||
进店
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
|
||||
<view class='pictrue' style="margin: 60rpx auto;">
|
||||
<image src='/static/images/noCart.png'></image>
|
||||
<view>暂无商品，去看点什么吧</view>
|
||||
</view>
|
||||
<recommend v-if="recommend_switch == 1" :hostProduct="hostProduct" :isLogin="isLogin"></recommend>
|
||||
</view>
|
||||
</block>
|
||||
<rightSlider v-if="rightBox" :status="rightBox" :brandList="brandList" @confirm="confirm" @close="close"></rightSlider>
|
||||
</view>
|
||||
<view class="down-wrapper" v-if="downStatus">
|
||||
<view class="bg"></view>
|
||||
<view class="down-box">
|
||||
<view class="down-item" v-for="(item,index) in downMenu" :key="item.key" :class="{'on':index == downKey}" @click="bindDown(item,index)">
|
||||
{{item.title}}
|
||||
<text v-if="index == downKey" class="iconfont icon-gou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||||
<!-- #ifndef H5 -->
|
||||
<passwordPopup></passwordPopup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { getCouponProductlist, getProductHot, getBrandlist } from '@/api/store.js';
|
||||
import recommend from '@/components/recommend';
|
||||
import rightSlider from '@/components/rightSlider.vue'
|
||||
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
|
||||
import {initiateAssistApi} from '@/api/activity.js';
|
||||
import { mapGetters } from "vuex";
|
||||
import { configMap } from "@/utils";
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
// #ifndef H5
|
||||
import passwordPopup from '@/components/passwordPopup';
|
||||
// #endif
|
||||
import authorize from '@/components/Authorize';
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
const app = getApp();
|
||||
export default {
|
||||
computed: configMap({hide_mer_status: 1,recommend_switch:0},mapGetters(['uid','isLogin','scrollTop','viewColor','keyColor'])),
|
||||
components: {
|
||||
// #ifndef H5
|
||||
passwordPopup,
|
||||
// #endif
|
||||
recommend,
|
||||
rightSlider,
|
||||
WaterfallsFlow,
|
||||
authorize,
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
productList: [],
|
||||
couponData: {},
|
||||
list: [],
|
||||
where: {
|
||||
coupon_id: '',
|
||||
cate_id: '',
|
||||
order: '',
|
||||
price_on: '',
|
||||
price_off: '',
|
||||
brand_id: '',
|
||||
keyword:'',
|
||||
page:1,
|
||||
limit:30
|
||||
},
|
||||
price: 0,
|
||||
stock: 0,
|
||||
nows: false,
|
||||
loadend: false,
|
||||
loading: false,
|
||||
loadTitle: '加载更多',
|
||||
title: '',
|
||||
hostProduct: [],
|
||||
hotPage: 1,
|
||||
hotLimit: 10,
|
||||
hotScroll: false,
|
||||
// 筛选框
|
||||
rightBox: false,
|
||||
//品牌列表
|
||||
brandList: [],
|
||||
downKey: 0,
|
||||
downStatus: false,
|
||||
// 下拉菜单
|
||||
downMenu: [{
|
||||
title: '综合排序',
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
title: '评分',
|
||||
key: 2,
|
||||
},
|
||||
{
|
||||
title: '新品',
|
||||
key: 3,
|
||||
}
|
||||
],
|
||||
// 是否第一个
|
||||
firstKey:0,
|
||||
// tab切换
|
||||
tabIndex: 1,
|
||||
// 商铺列表
|
||||
storeList: [],
|
||||
sotreParam:{
|
||||
keyword:'',
|
||||
page:1,
|
||||
limit:30,
|
||||
order:''
|
||||
},
|
||||
storeKey:0,
|
||||
storeScroll:true,
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
};
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll() {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
onLoad: function(options) {
|
||||
this.$set(this.where, 'cate_id', options.id || '');
|
||||
this.$set(this.where, 'coupon_id', options.coupon_id || '');
|
||||
this.title = options.title || '';
|
||||
this.$set(this.where, 'keyword', options.searchValue || '');
|
||||
this.get_product_list(true);
|
||||
this.get_host_product();
|
||||
},
|
||||
onReady(){},
|
||||
mounted: function() {
|
||||
this.get_product_list(true);
|
||||
},
|
||||
methods: {
|
||||
// 授权回调
|
||||
onLoadFun() {
|
||||
this.isShowAuth = false
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
// 去店铺
|
||||
goShop(id){
|
||||
if(this.hide_mer_status != 1){
|
||||
uni.navigateTo({
|
||||
url:`/pages/store/home/index?id=${id}`
|
||||
})
|
||||
}
|
||||
},
|
||||
// 店铺排序
|
||||
storeTab(key){
|
||||
this.storeKey = key
|
||||
if(key == 0){
|
||||
this.sotreParam.order = ''
|
||||
}else if(key == 1){
|
||||
this.sotreParam.order = 'sales'
|
||||
}else{
|
||||
this.sotreParam.order = 'rate'
|
||||
}
|
||||
this.sotreParam.page = 1
|
||||
this.storeScroll = true
|
||||
this.storeList = []
|
||||
},
|
||||
// 右侧切换
|
||||
bindRight(){
|
||||
this.price = 0;
|
||||
this.firstKey = 4
|
||||
this.getBrandlist()
|
||||
},
|
||||
// 品牌列表
|
||||
getBrandlist(){
|
||||
let temp = []
|
||||
getBrandlist({
|
||||
cate_id:this.where.cate_id,
|
||||
keyword:this.where.keyword
|
||||
}).then(res=>{
|
||||
temp = res.data.list.map(item=>{
|
||||
return {
|
||||
...item,
|
||||
check:false
|
||||
}
|
||||
})
|
||||
if(this.where.brand_id.length>0){
|
||||
this.where.brand_id.forEach((ids,index)=>{
|
||||
temp.forEach(el=>{
|
||||
if(ids == el.brand_id){
|
||||
el.check = true
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
this.brandList = temp
|
||||
this.rightBox = true
|
||||
})
|
||||
},
|
||||
// 去详情页
|
||||
godDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
if (this.isLogin) {
|
||||
initiateAssistApi(item.activity_id).then(res => {
|
||||
let id = res.data.product_assist_set_id;
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/assist_detail/index?id=' + id
|
||||
});
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// 组件确定
|
||||
confirm(data) {
|
||||
let arr = []
|
||||
if(data.brandList.length == 0){
|
||||
this.where.brand_id = ''
|
||||
}else{
|
||||
data.brandList.forEach(item =>{
|
||||
arr.push(item.brand_id)
|
||||
})
|
||||
this.where.brand_id =arr
|
||||
}
|
||||
this.rightBox = data.status
|
||||
this.where.price_on = data.price_on
|
||||
this.where.price_off = data.price_off
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
|
||||
},
|
||||
// 组件关闭
|
||||
close() {
|
||||
this.rightBox = false
|
||||
},
|
||||
// 下拉选项
|
||||
bindDown(item, index) {
|
||||
this.firstKey = 0
|
||||
if(index == 0){
|
||||
this.where.order = ''
|
||||
}else if(index == 1){
|
||||
this.where.order = 'rate'
|
||||
}else if(index == 2){
|
||||
this.where.order = 'is_new'
|
||||
}
|
||||
this.downKey = index
|
||||
this.downStatus = false
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
},
|
||||
searchSubmit: function(e) {
|
||||
let that = this;
|
||||
that.$set(that.where, 'keyword', e.detail.value);
|
||||
that.loadend = false;
|
||||
that.$set(that.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
if (that.hotScroll) return
|
||||
getProductHot(
|
||||
that.hotPage,
|
||||
that.hotLimit,
|
||||
).then(res => {
|
||||
that.hotPage++
|
||||
that.hotScroll = res.data.length < that.hotLimit
|
||||
that.hostProduct = that.hostProduct.concat(res.data.list)
|
||||
// that.$set(that, 'hostProduct', res.data)
|
||||
});
|
||||
},
|
||||
//点击事件处理
|
||||
set_where: function(e) {
|
||||
switch (e) {
|
||||
case 1:
|
||||
uni.setStorageSync('storeIndex', this.where.cate_id);
|
||||
uni.navigateBack()
|
||||
break
|
||||
case 2:
|
||||
this.firstKey = e
|
||||
if (this.price == 0){
|
||||
this.price = 1;
|
||||
this.where.order = 'price_asc'
|
||||
}else if (this.price == 1){
|
||||
this.price = 2;
|
||||
this.where.order = 'price_desc'
|
||||
}else if (this.price == 2){
|
||||
this.price = 0;
|
||||
this.where.order = ''
|
||||
}
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
break;
|
||||
case 3:
|
||||
this.price = 0;
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'order', 'sales')
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
this.firstKey = e
|
||||
break;
|
||||
}
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1);
|
||||
this.get_product_list(true);
|
||||
},
|
||||
//查找产品
|
||||
get_product_list: function(isPage) {
|
||||
let that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
if (isPage === true) that.$set(that, 'productList', []);
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
getCouponProductlist(that.where).then(res => {
|
||||
this.couponData = res.data.coupon;
|
||||
let list = res.data.list;
|
||||
let productList = that.$util.SplitArray(list, that.productList);
|
||||
let loadend = list.length < that.where.limit;
|
||||
that.loadend = loadend;
|
||||
that.loading = false;
|
||||
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
||||
that.$set(that, 'productList', productList);
|
||||
that.$set(that.where, 'page', that.where.page + 1);
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
that.loadTitle = '加载更多';
|
||||
});
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.productList.length > 0) {
|
||||
this.get_product_list('');
|
||||
} else {
|
||||
this.get_host_product();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
// 模拟上拉刷新
|
||||
setTimeout(()=>{
|
||||
const newList = this.productList.reverse();
|
||||
this.productList = newList;
|
||||
uni.stopPullDownRefresh();
|
||||
},500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.productList .search {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
background-color: var(--view-theme);
|
||||
}
|
||||
|
||||
.productList .search .back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 40rpx;
|
||||
height: 60rpx;
|
||||
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.font-bg-red {
|
||||
background-color: var(--view-theme);
|
||||
border: 1px solid var(--view-theme);
|
||||
&.type2{
|
||||
background-color: #FD6523;
|
||||
border: 1rpx solid #FD6523;
|
||||
}
|
||||
}
|
||||
.productList .search .input {
|
||||
/*#ifdef H5*/
|
||||
width: 650rpx;
|
||||
/*#endif*/
|
||||
/*#ifndef H5*/
|
||||
width: 100%;
|
||||
/*#endif*/
|
||||
height: 60rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.productList .search .input input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.productList .search .input .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.productList .search .input .iconfont {
|
||||
font-size: 35rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.productList .search .icon-pailie,
|
||||
.productList .search .icon-tupianpailie {
|
||||
color: #fff;
|
||||
width: 62rpx;
|
||||
font-size: 40rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
}
|
||||
|
||||
.productList .nav-wrapper {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
margin-top: 86rpx;
|
||||
background-color: var(--view-theme);
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8rpx 0 20rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 18rpx;
|
||||
width: 30rpx;
|
||||
height: 3rpx;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&.on {
|
||||
&::after {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productList .nav {
|
||||
height: 86rpx;
|
||||
color: #454545;
|
||||
font-size: 28rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.productList .nav .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.productList .nav .item.t-color {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.productList .nav .item image {
|
||||
width: 15rpx;
|
||||
height: 19rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.productList .list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.productList .list.on {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
}
|
||||
.item_tags{
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.item_tags .tags_item {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
border-radius: 5rpx;
|
||||
padding: 0 4rpx;
|
||||
line-height: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
|
||||
}
|
||||
.item_tags .tags_item.ticket{
|
||||
color: #E93323;
|
||||
border: 1rpx solid #E93323;
|
||||
}
|
||||
.item_tags .tags_item.delivery{
|
||||
color: #FF9000;
|
||||
border: 1rpx solid #FF9000;
|
||||
}
|
||||
.container{
|
||||
margin-top: 168rpx;
|
||||
}
|
||||
.coupon_count{
|
||||
background: var(--view-minorColor);
|
||||
padding: 15rpx 30rpx 12rpx;
|
||||
|
||||
color: var(--view-theme);
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
.text{
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
}
|
||||
.coupon_used{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 300rpx;
|
||||
padding: 3rpx 16rpx;
|
||||
margin-left: 10rpx;
|
||||
background-size: 100% 100%;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
color: var(--view-priceColor);
|
||||
|
||||
}
|
||||
.svip-count{
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
}
|
||||
.vip-money {
|
||||
color: #282828;
|
||||
font-size: 22rpx;
|
||||
margin-left: 6rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.vipImg {
|
||||
width: 65rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 4rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.noCommodity {
|
||||
background-color: #fff;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display: block;
|
||||
transform: rotate(180deg);
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.icon-xiala1 {
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.icon-shaixuan {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.down-wrapper {
|
||||
.bg {
|
||||
z-index: 8;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
.down-box {
|
||||
z-index: 8;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 170rpx;
|
||||
width: 100%;
|
||||
padding: 0 40rpx 28rpx 74rpx;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
.down-item {
|
||||
margin-top: 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #454545;
|
||||
&.on {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
.iconfont{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-wrapper {
|
||||
margin-top: 240rpx;
|
||||
border-top: 1px solid #F6F6F6;
|
||||
|
||||
.star-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.star {
|
||||
position: relative;
|
||||
width: 111rpx;
|
||||
height: 19rpx;
|
||||
background: url(~pages/columnGoods/images/star.png);
|
||||
background-size: 111rpx 19rpx;
|
||||
}
|
||||
|
||||
.star-active {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 111rpx;
|
||||
height: 19rpx;
|
||||
overflow: hidden;
|
||||
background: url(~pages/columnGoods/images/star_active.png);
|
||||
background-size: 111rpx 19rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: $theme-color;
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store-item {
|
||||
margin-bottom: 12rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.con-box {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
width: 114rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
background: linear-gradient(-90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
|
||||
border-radius: 25rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-wrapper {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
.pic-item {
|
||||
position: relative;
|
||||
width: 226rpx;
|
||||
height: 226rpx;
|
||||
margin-right: 16rpx;
|
||||
image {
|
||||
width: 226rpx;
|
||||
height: 226rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.price {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: 16rpx 2rpx 16rpx 2rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.productList .list .item.on {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
padding: 30rpx 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.productList .list .item .pictrue.on {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
.productList .list .item .pictrue image {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.productList .list .item .text {
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
width: 460rpx;
|
||||
padding: 0 0 0 22rpx;
|
||||
justify-content: space-between;
|
||||
.name,.item_bot{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.productList .list .item .text .money {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
.productList .list .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.productList .distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.icon-xiangyou {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
}
|
||||
.productList .list .item .text .score {
|
||||
margin-top: 10rpx;
|
||||
color: #737373;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.productList .list .item .text .company {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #737373;
|
||||
font-size: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
.name {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10rpx;
|
||||
color: #282828;
|
||||
.iconfont {
|
||||
font-size: 16rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,974 @@
|
|||
<template>
|
||||
<view :style="viewColor">
|
||||
<view class='productList'>
|
||||
<view class='search acea-row row-between-wrapper'>
|
||||
<!--#ifdef H5-->
|
||||
<view class="back" @click='set_where(1)'>
|
||||
<view class="iconfont icon-xiangzuo"></view>
|
||||
</view>
|
||||
<!--#endif-->
|
||||
<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
|
||||
<input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search" :value='where.keyword'
|
||||
@confirm="searchSubmit"></input>
|
||||
</view>
|
||||
<view style="text-align: right;" class='iconfont' :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'></view>
|
||||
</view>
|
||||
<view class="nav-wrapper">
|
||||
<view class='nav acea-row row-middle'>
|
||||
<view class='item' @click="downStatus = !downStatus" :class="{'t-color':downKey>0 && firstKey == 0}">
|
||||
{{downMenu[downKey].title}}
|
||||
<text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text>
|
||||
<text v-else class="iconfont icon-xiala1"></text>
|
||||
</view>
|
||||
<view class='item' :class="{'t-color':firstKey == 3}" @click='set_where(3)'>
|
||||
销量
|
||||
</view>
|
||||
<view class='item' :class="{'t-color':firstKey == 2}" @click='set_where(2)'>
|
||||
价格
|
||||
<image v-if="price==1" :src="domain+'/static/diy/up'+keyColor+'.png'"></image>
|
||||
<image v-else-if="price==2" :src="domain+'/static/diy/down'+keyColor+'.png'"></image>
|
||||
<image v-else src='/static/images/horn.png'></image>
|
||||
</view>
|
||||
<!-- down -->
|
||||
<view class='item' :class="{'t-color':firstKey == 4}" @click='bindRight'>
|
||||
筛选
|
||||
<text class="iconfont icon-shaixuan"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品 -->
|
||||
<block v-if="tabIndex == 1">
|
||||
<view v-if="!is_switch" class='list acea-row row-between-wrapper on'>
|
||||
<view class='item on' hover-class='none' v-for="(item,index) in productList" :key="index"
|
||||
@click="godDetail(item)">
|
||||
<view class='pictrue on'>
|
||||
<image :src='item.image' class="on"></image>
|
||||
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
|
||||
</view>
|
||||
<view class='text on'>
|
||||
<view class='name line1'>
|
||||
<text class="text_name line2">{{item.store_name}}</text>
|
||||
</view>
|
||||
<view class='money on'>￥<text class='num'>{{item.price}}</text></view>
|
||||
<view class="item_tags">
|
||||
<text v-if="item.merchant.type_name && item.product_type == 0" class="font-bg-red bt-color">{{item.merchant.type_name}}</text>
|
||||
<text v-else-if="item.merchant.is_trader && item.product_type == 0" class="font-bg-red bt-color">自营</text>
|
||||
<text v-if="item.product_type != 0" :class="'font_bg-red bt-color type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
|
||||
<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
|
||||
<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
|
||||
</view>
|
||||
<view class="score">{{item.rate}}评分 {{item.reply_count}}条评论</view>
|
||||
<view class="company" v-if="item.merchant" @click.stop="goShop(item.mer_id)">
|
||||
<text class="line1">{{item.merchant.mer_name}}</text>
|
||||
<view class="flex">
|
||||
进店
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 返佣 -->
|
||||
<block v-if="item.max_extension>0 && (item.product_type == 0 || item.product_type == 2)">
|
||||
<view class="foot-bar on">
|
||||
最高赚 ¥{{item.max_extension}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class='list'>
|
||||
<WaterfallsFlow :wfList='productList' @itemTap="godDetail" :type="1" @goShop="goShop"/>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
|
||||
<view class='pictrue' style="margin: 60rpx auto;">
|
||||
<image src='/static/images/noCart.png'></image>
|
||||
<view>暂无商品，去看点什么吧</view>
|
||||
</view>
|
||||
<recommend v-if="recommend_switch == 1" :hostProduct="hostProduct" :isLogin="isLogin"></recommend>
|
||||
</view>
|
||||
</block>
|
||||
<rightSlider v-if="rightBox" :status="rightBox" :brandList="brandList" @confirm="confirm" @close="close"></rightSlider>
|
||||
</view>
|
||||
<view class="down-wrapper" v-if="downStatus">
|
||||
<view class="bg"></view>
|
||||
<view class="down-box">
|
||||
<view class="down-item" v-for="(item,index) in downMenu" :key="item.key" :class="{'on':index == downKey}" @click="bindDown(item,index)">
|
||||
{{item.title}}
|
||||
<text v-if="index == downKey" class="iconfont icon-gou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||||
<!-- #ifndef H5 -->
|
||||
<passwordPopup></passwordPopup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {
|
||||
getProductslist,
|
||||
getProductHot,
|
||||
getBrandlist,
|
||||
storeMerchantList
|
||||
} from '@/api/store.js';
|
||||
import recommend from '@/components/recommend';
|
||||
import rightSlider from '@/components/rightSlider.vue'
|
||||
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
|
||||
import {initiateAssistApi} from '@/api/activity.js';
|
||||
import { configMap } from "@/utils";
|
||||
import { mapGetters } from "vuex";
|
||||
// #ifndef H5
|
||||
import passwordPopup from '@/components/passwordPopup';
|
||||
// #endif
|
||||
import authorize from '@/components/Authorize';
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
const app = getApp();
|
||||
export default {
|
||||
computed: configMap({hide_mer_status: 1,recommend_switch: 0}, mapGetters(['uid','isLogin','scrollTop','viewColor','keyColor'])),
|
||||
components: {
|
||||
// #ifndef H5
|
||||
passwordPopup,
|
||||
// #endif
|
||||
recommend,
|
||||
rightSlider,
|
||||
WaterfallsFlow,
|
||||
authorize,
|
||||
},
|
||||
watch:{
|
||||
tabIndex(nVal,oVal){
|
||||
if(nVal == 1){
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
}else{
|
||||
this.downStatus = false
|
||||
this.storeMerchantList()
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
productList: [],
|
||||
list: [],
|
||||
is_switch: true,
|
||||
where: {
|
||||
cate_pid: '',
|
||||
order: '',
|
||||
price_on: '',
|
||||
price_off: '',
|
||||
brand_id: '',
|
||||
keyword:'',
|
||||
page:1,
|
||||
limit:30
|
||||
},
|
||||
price: 0,
|
||||
stock: 0,
|
||||
nows: false,
|
||||
loadend: false,
|
||||
loading: false,
|
||||
loadTitle: '加载更多',
|
||||
title: '',
|
||||
hostProduct: [],
|
||||
hotPage: 1,
|
||||
hotLimit: 10,
|
||||
hotScroll: false,
|
||||
// 筛选框
|
||||
rightBox: false,
|
||||
//品牌列表
|
||||
brandList: [],
|
||||
downKey: 0,
|
||||
downStatus: false,
|
||||
// 下拉菜单
|
||||
downMenu: [{
|
||||
title: '综合',
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
title: '评分',
|
||||
key: 2,
|
||||
},
|
||||
{
|
||||
title: '新品',
|
||||
key: 3,
|
||||
}
|
||||
],
|
||||
// 是否第一个
|
||||
firstKey:0,
|
||||
// tab切换
|
||||
tabIndex: 1,
|
||||
// 商铺列表
|
||||
storeList: [],
|
||||
sotreParam:{
|
||||
keyword:'',
|
||||
page:1,
|
||||
limit:30,
|
||||
order:''
|
||||
},
|
||||
storeKey:0,
|
||||
storeScroll:true,
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
};
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll() {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
onLoad: function(options) {
|
||||
this.$set(this.where, 'cate_pid', options.id || '');
|
||||
this.title = options.title || '';
|
||||
this.$set(this.where, 'keyword', options.searchValue || '');
|
||||
this.get_product_list(true);
|
||||
this.get_host_product();
|
||||
},
|
||||
onReady(){
|
||||
|
||||
},
|
||||
mounted: function() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 授权回调
|
||||
onLoadFun() {
|
||||
this.isShowAuth = false
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
// 去店铺
|
||||
goShop(id){
|
||||
if(this.hide_mer_status != 1){
|
||||
uni.navigateTo({
|
||||
url:`/pages/store/home/index?id=${id}`
|
||||
})
|
||||
}
|
||||
},
|
||||
// 查找店铺
|
||||
storeMerchantList(){
|
||||
if(!this.storeScroll) return
|
||||
storeMerchantList({
|
||||
keyword:this.where.keyword,
|
||||
page:this.sotreParam.page,
|
||||
limit:this.sotreParam.limit,
|
||||
order:this.sotreParam.order
|
||||
}).then(res=>{
|
||||
this.storeScroll = res.data.list.length>=this.sotreParam.limit
|
||||
this.sotreParam.page+=1
|
||||
this.storeList =this.storeList.concat(res.data.list)
|
||||
})
|
||||
},
|
||||
// 店铺排序
|
||||
storeTab(key){
|
||||
this.storeKey = key
|
||||
if(key == 0){
|
||||
this.sotreParam.order = ''
|
||||
}else if(key == 1){
|
||||
this.sotreParam.order = 'sales'
|
||||
}else{
|
||||
this.sotreParam.order = 'rate'
|
||||
}
|
||||
this.sotreParam.page = 1
|
||||
this.storeScroll = true
|
||||
this.storeList = []
|
||||
this.storeMerchantList()
|
||||
},
|
||||
// 右侧切换
|
||||
bindRight(){
|
||||
this.price = 0;
|
||||
this.firstKey = 4
|
||||
this.getBrandlist()
|
||||
|
||||
},
|
||||
// 品牌列表
|
||||
getBrandlist(){
|
||||
let temp = []
|
||||
getBrandlist({
|
||||
cate_pid:this.where.cate_pid,
|
||||
keyword:this.where.keyword
|
||||
}).then(res=>{
|
||||
temp = res.data.list.map(item=>{
|
||||
return {
|
||||
...item,
|
||||
check:false
|
||||
}
|
||||
})
|
||||
if(this.where.brand_id.length>0){
|
||||
this.where.brand_id.forEach((ids,index)=>{
|
||||
temp.forEach(el=>{
|
||||
if(ids == el.brand_id){
|
||||
el.check = true
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
this.brandList = temp
|
||||
this.rightBox = true
|
||||
})
|
||||
},
|
||||
// 去详情页
|
||||
godDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
if (this.isLogin) {
|
||||
initiateAssistApi(item.activity_id).then(res => {
|
||||
let id = res.data.product_assist_set_id;
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/assist_detail/index?id=' + id
|
||||
});
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
// 组件确定
|
||||
confirm(data) {
|
||||
let arr = []
|
||||
if(data.brandList.length == 0){
|
||||
this.where.brand_id = ''
|
||||
}else{
|
||||
data.brandList.forEach(item =>{
|
||||
arr.push(item.brand_id)
|
||||
})
|
||||
this.where.brand_id =arr
|
||||
}
|
||||
this.rightBox = data.status
|
||||
this.where.price_on = data.price_on
|
||||
this.where.price_off = data.price_off
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
|
||||
},
|
||||
// 组件关闭
|
||||
close() {
|
||||
this.rightBox = false
|
||||
},
|
||||
// 下拉选项
|
||||
bindDown(item, index) {
|
||||
this.firstKey = 0
|
||||
if(index == 0){
|
||||
this.where.order = ''
|
||||
}else if(index == 1){
|
||||
this.where.order = 'rate'
|
||||
}else if(index == 2){
|
||||
this.where.order = 'is_new'
|
||||
}
|
||||
this.downKey = index
|
||||
this.downStatus = false
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
},
|
||||
Changswitch: function() {
|
||||
let that = this;
|
||||
that.is_switch = !that.is_switch
|
||||
},
|
||||
searchSubmit: function(e) {
|
||||
let that = this;
|
||||
that.$set(that.where, 'keyword', e.detail.value);
|
||||
if(this.tabIndex == 1){
|
||||
that.loadend = false;
|
||||
that.$set(that.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
}else{
|
||||
this.sotreParam.page = 1
|
||||
this.storeScroll = true
|
||||
this.storeList = []
|
||||
this.storeMerchantList()
|
||||
}
|
||||
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
if (that.hotScroll) return
|
||||
getProductHot(
|
||||
that.hotPage,
|
||||
that.hotLimit,
|
||||
).then(res => {
|
||||
that.hotPage++
|
||||
that.hotScroll = res.data.length < that.hotLimit
|
||||
that.hostProduct = that.hostProduct.concat(res.data.list)
|
||||
// that.$set(that, 'hostProduct', res.data)
|
||||
});
|
||||
},
|
||||
//点击事件处理
|
||||
set_where: function(e) {
|
||||
switch (e) {
|
||||
case 1:
|
||||
uni.setStorageSync('storeIndex', this.where.cate_pid);
|
||||
uni.navigateBack()
|
||||
break
|
||||
case 2:
|
||||
this.firstKey = e
|
||||
if (this.price == 0){
|
||||
this.price = 1;
|
||||
this.where.order = 'price_asc'
|
||||
}else if (this.price == 1){
|
||||
this.price = 2;
|
||||
this.where.order = 'price_desc'
|
||||
}else if (this.price == 2){
|
||||
this.price = 0;
|
||||
this.where.order = ''
|
||||
}
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
break;
|
||||
case 3:
|
||||
this.price = 0;
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'order', 'sales')
|
||||
this.$set(this.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
this.firstKey = e
|
||||
break;
|
||||
}
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1);
|
||||
this.get_product_list(true);
|
||||
},
|
||||
//查找产品
|
||||
get_product_list: function(isPage) {
|
||||
let that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
if (isPage === true) that.$set(that, 'productList', []);
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
getProductslist(that.where).then(res => {
|
||||
let list = res.data.list;
|
||||
let productList = that.$util.SplitArray(list, that.productList);
|
||||
let loadend = list.length < that.where.limit;
|
||||
that.loadend = loadend;
|
||||
that.loading = false;
|
||||
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
||||
that.$set(that, 'productList', productList);
|
||||
that.$set(that.where, 'page', that.where.page + 1);
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
that.loadTitle = '加载更多';
|
||||
});
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.tabIndex == 1){
|
||||
if (this.productList.length > 0) {
|
||||
this.get_product_list('');
|
||||
} else {
|
||||
this.get_host_product();
|
||||
}
|
||||
}else{
|
||||
this.storeMerchantList()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
// 模拟上拉刷新
|
||||
setTimeout(()=>{
|
||||
const newList = this.productList.reverse();
|
||||
this.productList = newList;
|
||||
uni.stopPullDownRefresh();
|
||||
},500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.productList .search {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
background-color: var(--view-theme);
|
||||
}
|
||||
.bt-color{
|
||||
background-color: var(--view-theme);
|
||||
border:1px solid var(--view-theme);
|
||||
&.type2{
|
||||
background-color: #FD6523;
|
||||
border: 1px solid #FD6523;
|
||||
}
|
||||
}
|
||||
.productList .search .back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 40rpx;
|
||||
height: 60rpx;
|
||||
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.productList .search .input {
|
||||
width: 570rpx;
|
||||
height: 60rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.productList .search .input input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.productList .search .input .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.productList .search .input .iconfont {
|
||||
font-size: 35rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.productList .search .icon-pailie,
|
||||
.productList .search .icon-tupianpailie {
|
||||
color: #fff;
|
||||
width: 62rpx;
|
||||
font-size: 40rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
}
|
||||
|
||||
.productList .nav-wrapper {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
margin-top: 86rpx;
|
||||
background-color: $theme-color;
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8rpx 0 20rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 18rpx;
|
||||
width: 30rpx;
|
||||
height: 3rpx;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&.on {
|
||||
&::after {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productList .nav {
|
||||
height: 86rpx;
|
||||
color: #454545;
|
||||
font-size: 28rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.productList .nav .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
&.t-color{
|
||||
// color: var(--view-theme);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.productList .nav .item image {
|
||||
width: 15rpx;
|
||||
height: 19rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.productList .list {
|
||||
padding: 0 20rpx;
|
||||
margin-top: 168rpx;
|
||||
// min-height: 100vh;
|
||||
}
|
||||
|
||||
.productList .list.on {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
background-color: #fff;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display: block;
|
||||
transform: rotate(180deg);
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.icon-xiala1 {
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.icon-shaixuan {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.down-wrapper {
|
||||
.bg {
|
||||
z-index: 8;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.down-box {
|
||||
z-index: 8;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 170rpx;
|
||||
width: 100%;
|
||||
padding: 0 40rpx 28rpx 74rpx;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
.down-item {
|
||||
margin-top: 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #454545;
|
||||
&.on {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
.iconfont{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store-wrapper {
|
||||
margin-top: 240rpx;
|
||||
border-top: 1px solid #F6F6F6;
|
||||
|
||||
.star-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.star {
|
||||
position: relative;
|
||||
width: 111rpx;
|
||||
height: 19rpx;
|
||||
background: url(~pages/columnGoods/images/star.png);
|
||||
background-size: 111rpx 19rpx;
|
||||
}
|
||||
|
||||
.star-active {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 111rpx;
|
||||
height: 19rpx;
|
||||
overflow: hidden;
|
||||
background: url(~pages/columnGoods/images/star_active.png);
|
||||
background-size: 111rpx 19rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: $theme-color;
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store-item {
|
||||
margin-bottom: 12rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.con-box {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
width: 114rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
background: linear-gradient(-90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
|
||||
border-radius: 25rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-wrapper {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.pic-item {
|
||||
position: relative;
|
||||
width: 226rpx;
|
||||
height: 226rpx;
|
||||
margin-right: 16rpx;
|
||||
|
||||
image {
|
||||
width: 226rpx;
|
||||
height: 226rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: 16rpx 2rpx 16rpx 2rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.productList .list .item.on {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
padding: 30rpx 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.productList .list .item .pictrue.on {
|
||||
position: relative;
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
}
|
||||
.productList .list .item .pictrue image {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
.productList .list .item .pictrue image.on {
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.productList .list .item .text {
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
width: 460rpx;
|
||||
padding: 0 0 0 22rpx;
|
||||
.name{
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
.item_tags{
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.item_tags .tags_item {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
border-radius: 5rpx;
|
||||
padding: 0 4rpx;
|
||||
line-height: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.item_tags .tags_item.ticket{
|
||||
color: #E93323;
|
||||
border: 1px solid #E93323;
|
||||
}
|
||||
.item_tags .tags_item.delivery{
|
||||
color: #FF9000;
|
||||
border: 1px solid #FF9000;
|
||||
}
|
||||
.productList .list .item .text .money {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 10rpx;
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
.productList .list .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.productList .distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.icon-xiangyou {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.productList .list .item .text .money .ticket-big {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 163rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
background-image: url(~static/images/yh.png);
|
||||
background-size: 100% 100%;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.productList .list .item .text .score {
|
||||
margin-top: 10rpx;
|
||||
color: #737373;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .company {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #737373;
|
||||
font-size: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10rpx;
|
||||
color: #282828;
|
||||
.iconfont {
|
||||
font-size: 16rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productList .list .item .foot-bar {
|
||||
width: 100%;
|
||||
height: 52rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||
border-radius: 0px 0px 16rpx 16rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
.icon-fenxiang {
|
||||
font-size: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
&.on {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 30rpx;
|
||||
width: 180rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 22rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class='searchGood'>
|
||||
<view class='search acea-row row-between-wrapper'>
|
||||
<view class='input acea-row row-between-wrapper'>
|
||||
<text class='iconfont icon-sousuo2'></text>
|
||||
<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品、店铺名称' placeholder-class='placeholder'
|
||||
@input="setValue"></input>
|
||||
</view>
|
||||
<view class='bnt' @tap='searchBut'>搜索</view>
|
||||
</view>
|
||||
<view class='title'>历史记录 <text class="iconfont icon-shanchu" @click="remove"></text></view>
|
||||
<view class='list acea-row' :style="{'height':historyBox?'auto':'150rpx'}" v-if="historyList.length > 0">
|
||||
<block v-for="(item,index) in historyList" :key="index">
|
||||
<view class='item line1' @tap='setHotSearchValue(item,0)'>{{item}}</view>
|
||||
</block>
|
||||
</view>
|
||||
<view>
|
||||
<view class="more-btn" v-if="historyList.length>9 && !historyBox" @click="historyBox = true">
|
||||
展开全部<text class="iconfont icon-xiangxia"></text>
|
||||
</view>
|
||||
<view class="more-btn" v-if="historyList.length>9 && historyBox" @click="historyBox = false">
|
||||
收起<text class="iconfont icon-xiangshang"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="historyList.length == 0" style="text-align: center; color: #999;">暂无搜索历史~</view>
|
||||
<view class='title'>热门搜索</view>
|
||||
<view class='list acea-row' :style="{'height': hotSearchBox?'auto':'150rpx'}">
|
||||
<block v-for="(item,index) in hotSearchList" :key="index">
|
||||
<view class='item line1' @tap='setHotSearchValue(item,1)'>{{item.keyword}}</view>
|
||||
</block>
|
||||
</view>
|
||||
<view>
|
||||
<view class="more-btn" v-if="hotSearchList.length>8 && !hotSearchBox" @click="hotSearchBox = true">
|
||||
展开全部<text class="iconfont icon-xiangxia"></text>
|
||||
</view>
|
||||
<view class="more-btn" v-if="hotSearchList.length>8 && hotSearchBox" @click="hotSearchBox = false">
|
||||
收起<text class="iconfont icon-xiangshang"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" :isGoIndex="false"></authorize>
|
||||
<!-- #ifndef H5 -->
|
||||
<passwordPopup></passwordPopup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { getSearchKeyword,copyPasswordSearch } from '@/api/store.js';
|
||||
import shareScence from '@/libs/spread';
|
||||
import { silenceBindingSpread } from '@/utils';
|
||||
import { goShopDetail } from '@/libs/order.js';
|
||||
import { initiateAssistApi } from '@/api/activity.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
// #ifndef H5
|
||||
import passwordPopup from '@/components/passwordPopup';
|
||||
// #endif
|
||||
import authorize from '@/components/Authorize';
|
||||
export default {
|
||||
computed: mapGetters(['isLogin', 'uid']),
|
||||
components: {
|
||||
// #ifndef H5
|
||||
passwordPopup,
|
||||
// #endif
|
||||
authorize,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hostProduct: [],
|
||||
searchValue: '',
|
||||
focus: true,
|
||||
bastList: [],
|
||||
hotSearchList: [],
|
||||
first: 0,
|
||||
limit: 8,
|
||||
page: 1,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
loadTitle: '加载更多',
|
||||
hotPage: 1,
|
||||
isScroll: true,
|
||||
// 搜索历史
|
||||
historyList: [],
|
||||
// 临时搜索列表
|
||||
tempStorage: [],
|
||||
historyBox: false,
|
||||
hotSearchBox: false,
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.searchValue = options.searchVal || ''
|
||||
},
|
||||
onShow: function() {
|
||||
try {
|
||||
this.historyList = []
|
||||
this.tempStorage = []
|
||||
let arr = uni.getStorageSync('historyList')
|
||||
if (arr.length > 0) {
|
||||
this.historyList = arr
|
||||
} else {
|
||||
this.historyList = []
|
||||
}
|
||||
|
||||
this.tempStorage = this.historyList
|
||||
} catch (e) {}
|
||||
this.getRoutineHotSearch();
|
||||
},
|
||||
methods: {
|
||||
// 微信登录回调
|
||||
onLoadFun: function(e) {
|
||||
this.isShowAuth = false;
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e;
|
||||
},
|
||||
// 清空历史记录
|
||||
remove() {
|
||||
let self = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除全部历史搜索记录？',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
self.tempStorage = []
|
||||
try {
|
||||
uni.setStorageSync('historyList', self.tempStorage)
|
||||
self.historyList = []
|
||||
} catch (e) {}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getRoutineHotSearch: function() {
|
||||
let that = this;
|
||||
getSearchKeyword().then(res => {
|
||||
that.$set(that, 'hotSearchList', res.data);
|
||||
});
|
||||
},
|
||||
setHotSearchValue: function(event, key) {
|
||||
this.focus = false
|
||||
if (key) {
|
||||
this.$set(this, 'searchValue', event.keyword);
|
||||
} else {
|
||||
this.$set(this, 'searchValue', event);
|
||||
}
|
||||
// this.$nextTick(() => {
|
||||
// this.focus = true
|
||||
// })
|
||||
this.searchBut()
|
||||
},
|
||||
setValue: function(event) {
|
||||
this.$set(this, 'searchValue', event.detail.value);
|
||||
},
|
||||
searchBut: function() {
|
||||
if(/^(\/@[1-9]{1}).*\*\//.test(this.searchValue)){
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
});
|
||||
copyPasswordSearch({key: this.searchValue}).then(res => {
|
||||
uni.hideLoading();
|
||||
let item = res.data
|
||||
shareScence(res.data.user.uid, this.isLogin);
|
||||
//#ifdef H5
|
||||
this.isLogin && silenceBindingSpread();
|
||||
//#endif
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
if (this.isLogin) {
|
||||
initiateAssistApi(item.activity_id)
|
||||
.then(res => {
|
||||
let id = res.data.product_assist_set_id;
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/assist_detail/index?id=' + id
|
||||
});
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
this.searchValue = ""
|
||||
});
|
||||
}else{
|
||||
|
||||
let status = false
|
||||
this.tempStorage.forEach((el, index) => {
|
||||
if (el == this.searchValue) {
|
||||
status = true
|
||||
}
|
||||
})
|
||||
if (!status && this.searchValue) {
|
||||
this.tempStorage.unshift(this.searchValue)
|
||||
}
|
||||
try {
|
||||
uni.setStorageSync('historyList', this.tempStorage);
|
||||
} catch (e) {}
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/columnGoods/goods_search_con/index?searchValue=' + this.searchValue
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.searchGood .search {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.searchGood .search {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.searchGood .search .input {
|
||||
width: 598rpx;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 33rpx;
|
||||
padding: 0 35rpx;
|
||||
box-sizing: border-box;
|
||||
height: 66rpx;
|
||||
}
|
||||
|
||||
.searchGood .search .input input {
|
||||
width: 472rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.searchGood .search .input .placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.searchGood .search .input .iconfont {
|
||||
color: #000;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.searchGood .search .bnt {
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
height: 66rpx;
|
||||
line-height: 66rpx;
|
||||
font-size: 30rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.searchGood .title {
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
margin: 50rpx 30rpx 25rpx 30rpx;
|
||||
|
||||
.icon-shanchu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.searchGood .list {
|
||||
padding: 0 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.searchGood .list .item {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding: 0 21rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(242, 242, 242, 1);
|
||||
border-radius: 22rpx;
|
||||
line-height: 60rpx;
|
||||
margin: 0 0 20rpx 20rpx;
|
||||
max-width: 150rpx;
|
||||
}
|
||||
|
||||
.searchGood .line {
|
||||
border-bottom: 1rpx solid #eee;
|
||||
margin: 20rpx 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 0 20rpx 20rpx;
|
||||
height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.iconfont {
|
||||
font-size: 22rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
|
|
@ -0,0 +1,530 @@
|
|||
<template>
|
||||
|
||||
<view class="content">
|
||||
|
||||
<form @submit="formSubmit" report-submit='true'>
|
||||
<view class="release_content">
|
||||
<view class="release_item">
|
||||
<view class="release_item-one">
|
||||
<view class="item-one">
|
||||
被委托商家
|
||||
</view>
|
||||
<e-select v-model="formData.entrust_mer_id" :value='formData.entrust_mer_id' :options="options1" @change="change1"
|
||||
placeholder="选择选项"></e-select>
|
||||
</view>
|
||||
<view class="release_item-one">
|
||||
<view class="item-one">
|
||||
委托周期
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
<input type="number" v-model="formData.entrust_day" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view class='name'><text class="iconfont icon-baobeilianjie"></text>添加产品({{productList.length}})
|
||||
</view>
|
||||
<view class="select">
|
||||
<view class="select_count" @click.stop="addProduct">
|
||||
<text v-if="productList.length == 0" class="text">选择产品</text>
|
||||
<view v-else class="text">
|
||||
<image class="image" v-for="(item,index) in productList" :key="index"
|
||||
:src="item.image"></image>
|
||||
</view>
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_center-one" v-for="(item,i) in productList" :key="i">
|
||||
<view class="center-one">
|
||||
<view class="center-one-img">
|
||||
<image :src="item.image" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="center-one-txt">
|
||||
<view class="one-txta">
|
||||
{{item.store_name}}
|
||||
</view>
|
||||
<view class="one-txtb">
|
||||
<view class="">
|
||||
委托价:¥<span>{{item.price}}</span>
|
||||
</view>
|
||||
<view class="">
|
||||
数量:{{item.number}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<button class="release_btn button" form-type="submit">提交</button>
|
||||
</view>
|
||||
</form>
|
||||
|
||||
|
||||
<!-- 提到的宝贝弹窗 -->
|
||||
<uni-popup ref="associated" type="bottom">
|
||||
<associated @close="close" @getProduct="getProduct" :checkedObj="productList"></associated>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import associated from '@/components/realselist/realselist.vue';
|
||||
import eselect from '@/components/e-select/e-select.vue';
|
||||
import {
|
||||
supplychain,
|
||||
entrustchain,
|
||||
editentrust,
|
||||
entrustdetail
|
||||
} from '@/api/sale.js'
|
||||
export default {
|
||||
components: {
|
||||
associated,
|
||||
eselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: 1,
|
||||
value2: "",
|
||||
options1: [],
|
||||
|
||||
productList: [],
|
||||
info: {
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
lunar: false,
|
||||
range: true,
|
||||
insert: false,
|
||||
selected: [],
|
||||
showMonth: false
|
||||
},
|
||||
formData: {
|
||||
entrust_mer_id: '',
|
||||
entrust_day: 15,
|
||||
is_type: "4",
|
||||
product_info: [],
|
||||
content: ''
|
||||
},
|
||||
type: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
onLoad(e) {
|
||||
this.id = e.id;
|
||||
this.type = e.type
|
||||
if (this.type) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑打折'
|
||||
})
|
||||
this.editlist(e.id)
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.list()
|
||||
},
|
||||
|
||||
methods: {
|
||||
change1(item) {
|
||||
console.log(item);
|
||||
},
|
||||
list() {
|
||||
supplychain({
|
||||
page: 1
|
||||
}).then((res => {
|
||||
|
||||
for (let i in res.data.list) {
|
||||
this.options1.push({
|
||||
text: res.data.list[i].mer_name,
|
||||
value: res.data.list[i].mer_id
|
||||
})
|
||||
}
|
||||
// console.log(res)
|
||||
}))
|
||||
},
|
||||
editlist(id) {
|
||||
entrustdetail(id).then((res) => {
|
||||
this.formData.entrust_mer_id = res.data.entrust_mer_id
|
||||
this.formData.entrust_day = res.data.entrust_day
|
||||
this.productList = res.data.product_list
|
||||
this.getProduct(res.data.product_list)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
calendar() {
|
||||
this.$refs.calendar.open()
|
||||
},
|
||||
//关闭商品弹窗
|
||||
close() {
|
||||
this.$refs.associated.close()
|
||||
},
|
||||
//打开商品弹窗
|
||||
addProduct() {
|
||||
this.$refs.associated.open()
|
||||
},
|
||||
//获取商品信息
|
||||
getProduct(data) {
|
||||
this.formData.product_info=[]
|
||||
if (data.length > 0) {
|
||||
|
||||
for (let i in data) {
|
||||
this.formData.content += data[i].store_name + ','
|
||||
this.formData.product_info.push({
|
||||
product_attr_unique: data[i].product_attr_unique,
|
||||
number: Number(data[i].number),
|
||||
price: data[i].price
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$refs.associated.close()
|
||||
},
|
||||
//提交
|
||||
formSubmit(e) {
|
||||
console.log(e)
|
||||
let that = this,
|
||||
value = that.formData;
|
||||
|
||||
if (value.entrust_day.length == 0 || value.entrust_day <= 0) return that.$util.Tips({
|
||||
title: '请选择委托周期'
|
||||
});
|
||||
if (value.product_info.length == 0) return that.$util.Tips({
|
||||
title: '请选择产品'
|
||||
});
|
||||
if (!value.entrust_mer_id) return that.$util.Tips({
|
||||
title: '请添加商家'
|
||||
});
|
||||
this.type?
|
||||
editentrust(this.id,value).then(res => {
|
||||
if (res.status == '200') {
|
||||
uni.hideLoading()
|
||||
that.$util.Tips({
|
||||
title: '编辑成功',
|
||||
icon: 'success'
|
||||
});
|
||||
that.formData = {
|
||||
entrust_mer_id: '',
|
||||
entrust_day: 0,
|
||||
is_type: "4",
|
||||
product_info: []
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '/pages/commissionedSales/initiateDelegation/index'
|
||||
})
|
||||
|
||||
} else {
|
||||
that.$util.Tips({
|
||||
title: res.messge,
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
|
||||
:
|
||||
entrustchain(value).then(res => {
|
||||
if (res.status == '200') {
|
||||
uni.hideLoading()
|
||||
that.$util.Tips({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
that.formData = {
|
||||
entrust_mer_id: '',
|
||||
entrust_day: 0,
|
||||
is_type: "4",
|
||||
product_info: []
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '/pages/commissionedSales/initiateDelegation/index'
|
||||
})
|
||||
|
||||
} else {
|
||||
that.$util.Tips({
|
||||
title: res.messge,
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.release_content {
|
||||
|
||||
padding: 0 28rpx;
|
||||
margin-top: 28rpx;
|
||||
|
||||
.content_center-one {
|
||||
display: flex;
|
||||
|
||||
|
||||
.center-one {
|
||||
margin-top: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
|
||||
.center-one-img {
|
||||
width: 154rpx;
|
||||
height: 154rpx;
|
||||
margin-right: 21rpx;
|
||||
|
||||
image {
|
||||
width: 154rpx;
|
||||
height: 154rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.center-one-txt {
|
||||
.one-txta {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.one-txtb {
|
||||
display: flex;
|
||||
margin-top: 28rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
span {
|
||||
color: #F84221;
|
||||
margin-right: 30rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.release_item {
|
||||
background: #ffffff;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.release_item-one {
|
||||
.item-one {
|
||||
margin-top: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.photo_count {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/deep/.loading-img {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.input_photo .pictrue {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.videoHover {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
>view {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background: #000000;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.iconfont {
|
||||
color: #ffffff;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-text {
|
||||
display: block;
|
||||
width: 180rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 18rpx;
|
||||
z-index: 13;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input_photo .add {
|
||||
background: #f6f6f6;
|
||||
color: #666666;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea textarea {
|
||||
font-size: 28rpx;
|
||||
padding-bottom: 38rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 400rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.textarea .placeholder {
|
||||
color: #BBBBBB;
|
||||
}
|
||||
|
||||
.release_item .item {
|
||||
height: 106rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
position: relative;
|
||||
font-size: 30rpx;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #333333;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #bbbbbb;
|
||||
|
||||
.select_count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-right: 15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.image,
|
||||
image,
|
||||
uni-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.text_name {
|
||||
color: var(--view-theme);
|
||||
padding: 5rpx 12rpx;
|
||||
background: var(--view-minorColor);
|
||||
border-radius: 23rpx;
|
||||
font-size: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.icon {
|
||||
color: var(--view-theme);
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 694rpx;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(84deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 42px 42px 42px 42px;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.release_btn {
|
||||
|
||||
position: absolute;
|
||||
bottom: 150rpx;
|
||||
left: 50%;
|
||||
margin-left: -347rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,386 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="content_top">
|
||||
<view class="content_top-one">
|
||||
<image src="@/static/images/dong.gif" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="content_top-two">
|
||||
<view class="top-two-one">
|
||||
|
||||
{{objinfo.mer_status==0?"待处理":""||objinfo.mer_status==2?"已拒绝":""||objinfo.mer_status==1?"已接受":""}}
|
||||
</view>
|
||||
<view class="top-two-two">
|
||||
<!-- 2020-07-07 14:14:14
|
||||
-->
|
||||
{{objinfo.entrust_start_date}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_center">
|
||||
<view class="content_center-one" v-for="(item,index) in objinfo.product_list">
|
||||
<view class="center-one">
|
||||
<view class="center-one-img">
|
||||
<image :src="item.image[0]" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="center-one-txt">
|
||||
<view class="one-txta">
|
||||
{{item.store_name}}
|
||||
</view>
|
||||
<view class="one-txtb">
|
||||
<view class="">
|
||||
委托价:¥<span>{{item.price}}</span>
|
||||
</view>
|
||||
<view class="">
|
||||
数量:{{item.number}}个
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="content_center-two" v-if="objinfo">
|
||||
<view class="center-two">
|
||||
<view class="center-twoa">
|
||||
委托方:
|
||||
</view>
|
||||
<view class="center-twob">
|
||||
{{objinfo.mer_info.mer_name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-two">
|
||||
<view class="center-twoa">
|
||||
被委托方:
|
||||
</view>
|
||||
<view class="center-twob">
|
||||
{{objinfo.entrust_mer_info.mer_name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-two">
|
||||
<view class="center-twoa">
|
||||
委托周期:
|
||||
</view>
|
||||
<view class="center-twob">
|
||||
{{objinfo.entrust_day}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-two">
|
||||
<view class="center-twoa">
|
||||
结算周期:
|
||||
</view>
|
||||
<view class="center-twob">
|
||||
{{objinfo.mer_info.settle_cycle}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-two">
|
||||
<view class="center-twoa">
|
||||
结算利息:
|
||||
</view>
|
||||
<view class="center-twob">
|
||||
{{objinfo.mer_info.interest_rate}}%
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-two">
|
||||
<view class="center-twoa">
|
||||
状态:
|
||||
</view>
|
||||
<view class="center-twob">
|
||||
|
||||
{{objinfo.mer_status==0?"待处理":""||objinfo.mer_status==2?"已拒绝":""||objinfo.mer_status==1?"已接受":""}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-two">
|
||||
<view class="center-twoa">
|
||||
是否结束委托:
|
||||
</view>
|
||||
<view class="center-twob">
|
||||
{{objinfo.entrust_finish==0?'未结束':""||objinfo.entrust_finish==1?'已结束':""||objinfo.entrust_finish==2?'商家拒绝':""||objinfo.entrust_finish==3?'申请':""}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-two" v-if="objinfo.entrust_finish_refusal">
|
||||
<view class="center-twoa">
|
||||
拒绝原因:
|
||||
</view>
|
||||
<view class="center-twob" :style="{'text-align':objinfo.entrust_finish_refusal.length<15?'right':'left'}">
|
||||
{{objinfo.entrust_finish_refusal}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="content_bootm">
|
||||
<view class="content_bootm_txt">
|
||||
查看TA提到的宝贝(2)
|
||||
</view>
|
||||
|
||||
|
||||
<view class="content_bootm_one" v-for="(item,i) in objinfo.product_list" @click="Merchbaby(item)">
|
||||
<view class="bootm_oneimg">
|
||||
<image :src="item.image[0]" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="">
|
||||
{{item.store_name}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<button class="release_btn button" v-if="objinfo.mer_status==1&&type==1" @click="submit(objinfo)">发布</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
addEntrustCart,
|
||||
entrustdetail
|
||||
} from '@/api/sale.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
objinfo: {},
|
||||
goodsData: [{
|
||||
name: '我发起的',
|
||||
name1: '委托销售商品',
|
||||
type: 1,
|
||||
src: require('@/static/images/wtbg1.png'),
|
||||
img: require('@/static/images/wtt1.png')
|
||||
},
|
||||
{
|
||||
name: '我收到的',
|
||||
name1: '帮助销售商品',
|
||||
type: 2,
|
||||
src: require('@/static/images/wtbg2.png'),
|
||||
img: require('@/static/images/wtt2.png')
|
||||
}
|
||||
],
|
||||
type: 0,
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.list(e.id)
|
||||
this.type = e.type
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//商品详情
|
||||
list(id) {
|
||||
entrustdetail(id).then((res) => {
|
||||
|
||||
this.objinfo = res.data
|
||||
})
|
||||
},
|
||||
//商品宝贝详情
|
||||
Merchbaby(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.product_id}`
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
//提交购物车
|
||||
submit(item) {
|
||||
addEntrustCart({
|
||||
community_id: item.community_id
|
||||
}).then(res => {
|
||||
|
||||
if (res.status == 200) {
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/order_confirm/index?cartId=' + res.data.cart_id.toString()
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content_top {
|
||||
height: 151rpx;
|
||||
background: linear-gradient(84deg, #2352FA 0%, #6497FF 100%);
|
||||
display: flex;
|
||||
padding-top: 21rpx;
|
||||
|
||||
.content_top-one {
|
||||
width: 107rpx;
|
||||
height: 107rpx;
|
||||
margin-left: 28rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content_top-two {
|
||||
margin-left: 25rpx;
|
||||
|
||||
.top-two-one {
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin-top: 10rpx;
|
||||
|
||||
}
|
||||
|
||||
.top-two-two {
|
||||
font-size: 28rpx;
|
||||
font-family: SF Pro Display-Light, SF Pro Display;
|
||||
font-weight: 300;
|
||||
color: #FFFFFF;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content_center {
|
||||
|
||||
background: #FFFFFF;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
margin: 28rpx 28rpx;
|
||||
|
||||
.content_center-one {
|
||||
display: flex;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.center-one {
|
||||
margin-top: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
|
||||
.center-one-img {
|
||||
width: 154rpx;
|
||||
height: 154rpx;
|
||||
margin-right: 21rpx;
|
||||
|
||||
image {
|
||||
width: 154rpx;
|
||||
height: 154rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.center-one-txt {
|
||||
.one-txta {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.one-txtb {
|
||||
display: flex;
|
||||
margin-top: 28rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
|
||||
span {
|
||||
color: #F84221;
|
||||
margin-right: 30rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content_center-two {
|
||||
padding: 0 28rpx;
|
||||
padding-bottom: 2rpx;
|
||||
|
||||
.center-two {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.center-twoa {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.center-twob {
|
||||
width: 360rpx;
|
||||
text-align: right;
|
||||
|
||||
word-wrap: break-word;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content_bootm {
|
||||
|
||||
margin-bottom: 150rpx;
|
||||
|
||||
.content_bootm_txt {
|
||||
margin-top: 42rpx;
|
||||
padding-left: 28rpx;
|
||||
}
|
||||
|
||||
.content_bootm_one {
|
||||
height: 112rpx;
|
||||
line-height: 112rpx;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
margin-top: 21rpx;
|
||||
|
||||
.bootm_oneimg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: auto 0;
|
||||
margin-left: 28rpx;
|
||||
margin-right: 21rpx;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 694rpx;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(84deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 42px 42px 42px 42px;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -347rpx;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<view class="select_warehouse">
|
||||
<view class="wrapper flex_a_c_j_sb">
|
||||
<block v-for="item in goodsData" :key="item.name">
|
||||
<view class="select_item" @click="navigato(item.type)"
|
||||
:style="{'background-image': `url(${item.src})`}">
|
||||
<view class="select_itemimga" v-if='item.type==1'>
|
||||
<image :src="item.img" mode=""></image>
|
||||
</view>
|
||||
<view class="select_itemimgb" v-else>
|
||||
<image :src="item.img" mode=""></image>
|
||||
</view>
|
||||
<view class="title">
|
||||
<view class="titlea">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="titleb">
|
||||
{{ item.name1 }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsData: [{
|
||||
name: '我发起的',
|
||||
name1: '委托销售商品',
|
||||
type: 1,
|
||||
src: require('@/static/images/wtbg1.png'),
|
||||
img: require('@/static/images/wtt1.png')
|
||||
},
|
||||
{
|
||||
name: '我收到的',
|
||||
name1: '帮助销售商品',
|
||||
type: 2,
|
||||
src: require('@/static/images/wtbg2.png'),
|
||||
img: require('@/static/images/wtt2.png')
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
navigato(type) {
|
||||
if (type === 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/commissionedSales/initiateDelegation/index`
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/commissionedSales/receivedCommission/index`
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.select_warehouse {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 694.74rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.goods-wrapper {
|
||||
.item {
|
||||
display: flex;
|
||||
height: 175.44rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin-top: 21.05rpx;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
.l_cont {
|
||||
image {
|
||||
width: 133.33rpx;
|
||||
height: 133.33rpx;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.r_cont {
|
||||
margin-left: 17.54rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select_item {
|
||||
width: 336rpx;
|
||||
height: 161rpx;
|
||||
border-radius: 8px;
|
||||
background-color: #eee;
|
||||
|
||||
display: flex;
|
||||
color: #fff;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.select_itemimga {
|
||||
width: 59rpx;
|
||||
height: 63rpx;
|
||||
margin-top: 49rpx;
|
||||
margin-left: 42rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.select_itemimgb {
|
||||
width: 75rpx;
|
||||
height: 65rpx;
|
||||
margin-top: 49rpx;
|
||||
margin-left: 42rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 23rpx;
|
||||
margin-top: 37rpx;
|
||||
|
||||
.titlea {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.titleb {
|
||||
margin-top: 5rpx;
|
||||
font-size: 25rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,992 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
|
||||
<view class="content_top">
|
||||
<!--选项卡滑动切换-->
|
||||
<cxNavTitle :tabs="tabs" :activeItem="activeItem" @tabClick="tabClick" :show='false'></cxNavTitle>
|
||||
</view>
|
||||
<!-- 审核通过 打折的拒绝、同意功能 ，调货不需要功能 -->
|
||||
<view class="content-content" v-for="(item,i) in orderList" :key="i">
|
||||
|
||||
<view class="content-one">
|
||||
<view class="content-one-img">
|
||||
<image src="@/static/images/bg2.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="content-one-txt">
|
||||
<view class="one-txt-a">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="one-txt-b">
|
||||
委托周期:{{item.entrust_day}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="content-two_one" v-if="item.mer_status==0">
|
||||
<view class="content-two-edita" @click="order">
|
||||
待处理
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
<!-- <view class="contentgn_a" @click="soldEdit(item)">
|
||||
处理
|
||||
</view>
|
||||
<span></span>-->
|
||||
<view class="contentgn_a" style="margin-left: 10rpx;" @click="Edit(item)">
|
||||
编辑
|
||||
</view>
|
||||
<span></span>
|
||||
<view class="contentgn_a" style="margin-left: 10rpx;" @click="deleteOrder(item)">
|
||||
删除
|
||||
</view>
|
||||
<span></span>
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-two_oneq" v-if="item.mer_status==1">
|
||||
<view class="content-two-editb" @click="accepted">
|
||||
已接受
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
<view class="contentgn_a" @click="closingorder(item)" v-if="item.entrust_finish==3">
|
||||
结束委托
|
||||
</view>
|
||||
<span v-if="item.entrust_finish==3"></span>
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-two_one" v-if="item.mer_status==2">
|
||||
<view class="content-two-editc" @click="declined">
|
||||
已拒绝
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
<!--<view class="contentgn_a" @click="deleteOrder(item)">
|
||||
删除
|
||||
</view>
|
||||
<span></span> -->
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-two_one" v-if="item.type==4">
|
||||
<view class="content-two-editd" @click="soldEdit">
|
||||
已完成
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
<view class="contentgn_a" @click="deleteOrder(item)">
|
||||
删除
|
||||
</view>
|
||||
<span></span>
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="adddelegation" @click="addDelegation">
|
||||
<view class="adddelegation-one">
|
||||
<image src="@/static/images/delegation.png" mode=""></image>
|
||||
</view>
|
||||
<view class="adddelegation-two">
|
||||
新增委托
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="orderList.length == 0">
|
||||
<emptyPage title="暂无订单~"></emptyPage>
|
||||
</view>
|
||||
<u-loadmore :status="status" v-if="orderList.length >= where.limit" />
|
||||
<uni-popup ref="bindmobile" type="center" @click="close">
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bg">
|
||||
<view class="entrust_bg-content">
|
||||
<view class="bg-content-a">
|
||||
委托申请处理
|
||||
</view>
|
||||
<view class="bg-content-b">
|
||||
结算周期: <span>{{obj.settle_cycle}}天</span>
|
||||
</view>
|
||||
<view class="bg-content-c">
|
||||
利息比例: <span>{{obj.interest_rate}}%</span>
|
||||
</view>
|
||||
<view class="entrust_bga_btn">
|
||||
<view class="cancellation" @click="passDelete(obj)">
|
||||
拒绝
|
||||
</view>
|
||||
<view class="determine" @click="passagree(obj)">
|
||||
接受
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="bindmobile1" type="center" @click="close">
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bga">
|
||||
<view class="entrust_bg-content">
|
||||
<view class="bg-content-a">
|
||||
确定结束委托?
|
||||
</view>
|
||||
<view class="entrust_bga_btn">
|
||||
<view class="cancellation">
|
||||
取消
|
||||
</view>
|
||||
<view class="determine">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="bindmobile2" type="center" @click="close">
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bg">
|
||||
<view class="entrust_bg-content">
|
||||
<view class="bg-content-a" style="margin-left: 207rpx;">
|
||||
结束委托申请处理
|
||||
</view>
|
||||
<view class="bg-content-b" v-if="obj.mer_info">
|
||||
结算周期: <span>{{obj.mer_info.settle_cycle}}天</span>
|
||||
</view>
|
||||
<view class="bg-content-c" v-if="obj.mer_info">
|
||||
利息比例: <span>{{obj.mer_info.interest_rate}}%</span>
|
||||
</view>
|
||||
<view class="entrust_bga_btn">
|
||||
<view class="cancellation" @click="refused">
|
||||
拒绝
|
||||
</view>
|
||||
<view class="determine" @click="agree(obj)">
|
||||
接受
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="bindmobile3" type="center" @click="close">
|
||||
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bgb">
|
||||
<view class="entrust_bg-content">
|
||||
<view class="bg-content-a" style="margin-left: 207rpx;">
|
||||
结束委托申请处理
|
||||
</view>
|
||||
<view class="bg-content-b" v-if="obj.mer_info">
|
||||
结算周期: <span>{{obj.mer_info.settle_cycle}}天</span>
|
||||
</view>
|
||||
<view class="bg-content-c" v-if="obj.mer_info">
|
||||
利息比例: <span>{{obj.mer_info.interest_rate}}%</span>
|
||||
</view>
|
||||
<view class="bg-content-c">
|
||||
拒绝原因：
|
||||
<view class="" style="margin-top: 21rpx;">
|
||||
<textarea v-model="refuseds" placeholder="输入拒绝原因" class="bg-content_textarea" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="entrust_bga_btn" @click="agree(obj)">
|
||||
<view class="determine">
|
||||
接受
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cxNavTitle from '@/components/cx-navTitle.vue'
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import {
|
||||
entrustlist,
|
||||
finishchain,
|
||||
checkchain,
|
||||
finishentrust
|
||||
} from '@/api/sale.js'
|
||||
export default {
|
||||
components: {
|
||||
cxNavTitle,
|
||||
emptyPage,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeItem: "tabOne",
|
||||
status: 'loadmore',
|
||||
tabTitle: "",
|
||||
orderList: [],
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
type: 1,
|
||||
status: 0
|
||||
},
|
||||
tabs: [{
|
||||
name: "tabOne",
|
||||
label: '待处理',
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
name: "tabTwo",
|
||||
label: '已接受',
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
name: "tabThree",
|
||||
label: '已拒绝',
|
||||
type: 2
|
||||
},
|
||||
|
||||
],
|
||||
list: [{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 1
|
||||
|
||||
},
|
||||
{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 2
|
||||
|
||||
},
|
||||
{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 3
|
||||
|
||||
},
|
||||
{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 4
|
||||
|
||||
}
|
||||
],
|
||||
obj: {},
|
||||
refuseds: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.tabTitle = this.tabs[0].name
|
||||
//有时进入页面需要获取默认的第一个标签做逻辑判断 -- 如下:
|
||||
// console.log(this.tabs[0])
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.commislist()
|
||||
},
|
||||
methods: {
|
||||
onReachBottom() {
|
||||
if (this.status == 'nomore') return;
|
||||
this.status = 'loading';
|
||||
this.where.page = ++this.where.page;
|
||||
this.commislist()
|
||||
},
|
||||
nav(item) {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/commissionedSales/delegation_details/index'
|
||||
// })
|
||||
},
|
||||
//获取分类数据
|
||||
commislist() {
|
||||
entrustlist(this.where).then((res) => {
|
||||
this.orderList.push(...res.data.list)
|
||||
if (res.data.list.length < this.where.limit) this.status = 'nomore'
|
||||
|
||||
if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
//选择
|
||||
tabClick(e) { //点击获取当前标签数据
|
||||
this.activeItem = e.name; //当前class类名
|
||||
this.tabTitle = e.name; //当前选的标签名
|
||||
this.where.page = 1
|
||||
this.orderList = []
|
||||
this.where.status = e.type
|
||||
this.commislist()
|
||||
},
|
||||
//编辑委托
|
||||
Edit(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/commissionedSales/addDelegation/index?id=' + item.community_id + '&type=edit'
|
||||
})
|
||||
},
|
||||
//新增委托
|
||||
addDelegation() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/commissionedSales/addDelegation/index'
|
||||
})
|
||||
},
|
||||
//管理弹窗
|
||||
close() {
|
||||
this.$refs.bindmobile.close()
|
||||
this.$refs.bindmobile1.close()
|
||||
this.$refs.bindmobile2.close()
|
||||
this.$refs.bindmobile3.close()
|
||||
},
|
||||
//提交订单
|
||||
|
||||
order(item) {
|
||||
if (item.mer_status == 0 && entrust_order_id != 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/commissionedSales/delegation_details/index?id=' + item.community_id
|
||||
})
|
||||
} else {
|
||||
this.$util.Tips({
|
||||
title: '商家还没同意该订单',
|
||||
icon: 'err'
|
||||
})
|
||||
}
|
||||
},
|
||||
//详情
|
||||
|
||||
detail(item) {
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/commissionedSales/delegation_details/index?id=' + item.community_id
|
||||
})
|
||||
},
|
||||
// 待处理
|
||||
soldEdit(item) {
|
||||
this.obj = item
|
||||
console.log(item)
|
||||
this.$refs.bindmobile.open()
|
||||
},
|
||||
//已接受
|
||||
accepted() {
|
||||
|
||||
},
|
||||
//结束委托
|
||||
closingorder(item) {
|
||||
console.log(item)
|
||||
this.obj = item
|
||||
this.$refs.bindmobile2.open()
|
||||
// this.$refs.bindmobile3.open()
|
||||
},
|
||||
//拒绝申请委托
|
||||
refused() {
|
||||
this.$refs.bindmobile2.close()
|
||||
setTimeout(() => {
|
||||
this.$refs.bindmobile3.open()
|
||||
}, 1000)
|
||||
},
|
||||
// 已拒绝
|
||||
declined() {
|
||||
// this.$refs.bindmobile2.open()
|
||||
this.$refs.bindmobile3.open()
|
||||
},
|
||||
agree(item) {
|
||||
finishentrust(item.community_id, {
|
||||
status: 2,
|
||||
refusal: this.refuseds
|
||||
}).then(res => {
|
||||
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabTwo"
|
||||
this.$refs.bindmobile2.close()
|
||||
this.$refs.bindmobile3.close()
|
||||
this.commislist()
|
||||
})
|
||||
},
|
||||
//删除订单
|
||||
deleteOrder(item) {
|
||||
|
||||
checkchain(item.community_id, {
|
||||
status: 3
|
||||
}).then(res => {
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabOne"
|
||||
this.commislist()
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
this.$util.Tips({
|
||||
title: err,
|
||||
icon: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 审核未通过 编辑
|
||||
auditEdit() {
|
||||
|
||||
},
|
||||
//审核通过 拒绝
|
||||
passDelete(item) {
|
||||
checkchain(item.community_id, {
|
||||
status: 2
|
||||
}).then((res) => {
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabOne"
|
||||
this.commislist()
|
||||
})
|
||||
},
|
||||
//审核通过 同意
|
||||
passagree(item) {
|
||||
checkchain(item.community_id, {
|
||||
status: 1
|
||||
}).then((res) => {
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabOne"
|
||||
this.commislist()
|
||||
this.$refs.bindmobile.close()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.content_top {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.adddelegation {
|
||||
width: 694rpx;
|
||||
height: 95rpx;
|
||||
|
||||
|
||||
background: linear-gradient(276deg, #F98649 0%, #F34E45 100%);
|
||||
box-shadow: 0 5rpx 11rpx 2rpx rgba(136, 20, 7, 0.3);
|
||||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
bottom: 84rpx;
|
||||
left: 50%;
|
||||
margin-left: -347rpx;
|
||||
|
||||
.adddelegation-one {
|
||||
width: 50rpx;
|
||||
margin-right: 30rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 242rpx;
|
||||
|
||||
margin-top: 21rpx;
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.adddelegation-two {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content_top {
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-content {
|
||||
|
||||
margin-top: 21rpx;
|
||||
background: #FFFFFF;
|
||||
padding: 0 28rpx;
|
||||
padding-top: 28rpx;
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
.content-one {
|
||||
display: flex;
|
||||
|
||||
padding-bottom: 23rpx;
|
||||
|
||||
.content-one-img {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
margin-right: 28rpx;
|
||||
border: 1px solid;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content-one-txt {
|
||||
|
||||
|
||||
.txt-b-a {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.one-txt-b {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.txt-b-a {
|
||||
font-size: 32rpx;
|
||||
font-family: SF Pro Display-Medium, SF Pro Display;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-right: 74rpx;
|
||||
}
|
||||
|
||||
.txt-b-b {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content-two_oneq {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
text-align: right;
|
||||
|
||||
.content-two-edita {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editb {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #FE9A10;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editc {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #20A162;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editd {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.contentgn {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 47rpx;
|
||||
|
||||
.contentgn_a {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #F84221;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 0px;
|
||||
height: 30rpx;
|
||||
opacity: 1;
|
||||
|
||||
margin-top: 10rpx;
|
||||
border: 2rpx solid #CCCCCC;
|
||||
|
||||
}
|
||||
|
||||
.contentgn_b {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content-two_one {
|
||||
|
||||
|
||||
|
||||
text-align: right;
|
||||
|
||||
.content-two-edita {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editb {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #FE9A10;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editc {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #20A162;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editd {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.contentgn {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 47rpx;
|
||||
|
||||
.contentgn_a {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #F84221;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 1px;
|
||||
height: 30rpx;
|
||||
opacity: 1;
|
||||
margin-top: 8rpx;
|
||||
background-color: #cccccc;
|
||||
|
||||
}
|
||||
|
||||
.contentgn_b {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.entrust {
|
||||
|
||||
|
||||
.entrust_close {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.entrust_bg {
|
||||
width: 694rpx;
|
||||
height: 676rpx;
|
||||
background: url('@/static/images/wtbg3.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.entrust_bg-content {
|
||||
position: absolute;
|
||||
top: 284rpx;
|
||||
|
||||
.bg-content-a {
|
||||
margin-left: 242rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bg-content-b {
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-content-c {
|
||||
margin-left: 35rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entrust_bga_btn {
|
||||
display: flex;
|
||||
margin-top: 53rpx;
|
||||
|
||||
.cancellation {
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 121rpx;
|
||||
margin-right: 49rpx;
|
||||
}
|
||||
|
||||
.determine {
|
||||
width: 249rpx;
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.entrust_bga {
|
||||
width: 694rpx;
|
||||
height: 520rpx;
|
||||
background: url('@/static/images/wtbg4.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.entrust_bg-content {
|
||||
position: absolute;
|
||||
top: 284rpx;
|
||||
|
||||
.bg-content-a {
|
||||
margin-left: 242rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.entrust_bga_btn {
|
||||
display: flex;
|
||||
margin-top: 53rpx;
|
||||
|
||||
.cancellation {
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 121rpx;
|
||||
margin-right: 49rpx;
|
||||
}
|
||||
|
||||
.determine {
|
||||
width: 249rpx;
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.entrust_bgb {
|
||||
width: 694rpx;
|
||||
height: 994rpx;
|
||||
background: url('@/static/images/wtbg5.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
|
||||
.entrust_bg-content {
|
||||
position: absolute;
|
||||
top: 304rpx;
|
||||
|
||||
.bg-content-a {
|
||||
margin-left: 242rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bg-content-b {
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-content-c {
|
||||
margin-left: 35rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 22rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-content_textarea {
|
||||
width: 624rpx;
|
||||
height: 242rpx;
|
||||
padding: 25rpx 18rpx;
|
||||
|
||||
background: #F5F5F5;
|
||||
}
|
||||
}
|
||||
|
||||
.entrust_bga_btn {
|
||||
display: flex;
|
||||
margin-top: 33rpx;
|
||||
|
||||
|
||||
.determine {
|
||||
margin-left: 188rpx;
|
||||
width: 249rpx;
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,910 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
|
||||
<view class="content_top">
|
||||
<!--选项卡滑动切换-->
|
||||
<cxNavTitle :tabs="tabs" :activeItem="activeItem" @tabClick="tabClick" :show='false'></cxNavTitle>
|
||||
</view>
|
||||
|
||||
<view class="content-content" v-for="(item,i) in orderList" :key="i" @click="nav(item)">
|
||||
|
||||
<view class="content-one">
|
||||
<view class="content-one-img">
|
||||
<image src="@/static/images/bg2.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="content-one-txt">
|
||||
<view class="one-txt-a">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="one-txt-b">
|
||||
委托周期:{{item.entrust_day}}
|
||||
</view>
|
||||
|
||||
<view class="one-txt-b" v-if="item.mer_status==1" style="color: red;margin-top: 3rpx;">
|
||||
{{item.entrust_finish==0?'未申请结束委托':""||item.entrust_finish==1?'委托已结束':""||item.entrust_finish==2?'商家拒绝结束委托':""||item.entrust_finish==3?'结束委托申请中':""}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-two_one" v-if="item.mer_status==0">
|
||||
<view class="content-two-edita" @click="order">
|
||||
待处理
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
<view class="contentgn_a" @click="soldEdit(item)">
|
||||
处理
|
||||
</view>
|
||||
<span></span>
|
||||
<!-- <view class="contentgn_a" style="margin-left: 10rpx;" @click="Edit(item)">
|
||||
编辑
|
||||
</view>
|
||||
<span></span> -->
|
||||
<!-- <view class="contentgn_a" style="margin-left: 10rpx;" @click="deleteOrder(item)">
|
||||
删除
|
||||
</view>
|
||||
<span></span> -->
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-two_oneq" v-if="item.mer_status==1">
|
||||
<view class="content-two-editb" @click="accepted">
|
||||
已接受
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
<view class="contentgn_a" style="margin-left: 10rpx;"
|
||||
v-if="item.entrust_order_id>0&&item.mer_status==1" @click="closingorder(item)">
|
||||
申请结束委托
|
||||
</view>
|
||||
<span v-if="item.entrust_order_id>0&&item.mer_status==1"></span>
|
||||
<view class="contentgn_a" v-if="item.entrust_order_id==0" style="margin-left: 10rpx;"
|
||||
@click="order(item)">
|
||||
去下单
|
||||
</view>
|
||||
<span v-if="item.entrust_order_id==0"></span>
|
||||
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-two_one" v-if="item.mer_status==2">
|
||||
<view class="content-two-editc" @click="declined">
|
||||
已拒绝
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
<!--
|
||||
-->
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-two_one" v-if="item.type==4">
|
||||
<view class="content-two-editd" @click="soldEdit">
|
||||
已完成
|
||||
</view>
|
||||
<view class="contentgn">
|
||||
|
||||
<view class="contentgn_b" @click="detail(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="orderList.length == 0">
|
||||
<emptyPage title="暂无订单~"></emptyPage>
|
||||
</view>
|
||||
<u-loadmore :status="status" v-if="orderList.length >= where.limit" />
|
||||
<u-loadmore :status="status" v-if="orderList.length >= where.limit" />
|
||||
<uni-popup ref="bindmobile" type="center" @click="close">
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bg">
|
||||
<view class="entrust_bg-content" v-if="obj.mer_info">
|
||||
<view class="bg-content-a">
|
||||
委托申请处理
|
||||
</view>
|
||||
<view class="bg-content-b" >
|
||||
结算周期: <span>{{obj.mer_info.settle_cycle}}天</span>
|
||||
</view>
|
||||
<view class="bg-content-c" >
|
||||
利息比例: <span>{{obj.mer_info.interest_rate}}%</span>
|
||||
</view>
|
||||
<view class="entrust_bga_btn">
|
||||
<view class="cancellation" @click="passDelete(obj)">
|
||||
拒绝
|
||||
</view>
|
||||
<view class="determine" @click="passagree(obj)">
|
||||
接受
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="bindmobile1" type="center" @click="close">
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bga">
|
||||
<view class="entrust_bg-content">
|
||||
<view class="bg-content-a">
|
||||
<!-- 确定结束委托? -->
|
||||
申请委托结束处理
|
||||
</view>
|
||||
<view class="entrust_bga_btn">
|
||||
<view class="cancellation" @click="close">
|
||||
取消
|
||||
</view>
|
||||
<view class="determine" @click="deteragrss(obj)">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="bindmobile2" type="center" @click="close">
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bg">
|
||||
<view class="entrust_bg-content">
|
||||
<view class="bg-content-a" style="margin-left: 207rpx;">
|
||||
结束委托申请处理
|
||||
</view>
|
||||
<view class="bg-content-b">
|
||||
结算周期: <span>30天</span>
|
||||
</view>
|
||||
<view class="bg-content-c">
|
||||
利息比例: <span>0.05%</span>
|
||||
</view>
|
||||
<view class="entrust_bga_btn">
|
||||
<view class="cancellation">
|
||||
拒绝
|
||||
</view>
|
||||
<view class="determine">
|
||||
接受
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="bindmobile3" type="center" @click="close">
|
||||
|
||||
<view class="" style="position: relative;">
|
||||
<view class="entrust">
|
||||
<view class="entrust_close" @click="close">
|
||||
<image src="@/static/images/wt_close.png" mode=""></image>
|
||||
</view>
|
||||
<view class="entrust_bgb">
|
||||
<view class="entrust_bg-content">
|
||||
<view class="bg-content-a" style="margin-left: 207rpx;">
|
||||
结束委托申请处理
|
||||
</view>
|
||||
<view class="bg-content-b">
|
||||
结算周期: <span>30天</span>
|
||||
</view>
|
||||
<view class="bg-content-c">
|
||||
利息比例: <span>0.05%</span>
|
||||
</view>
|
||||
<view class="bg-content-c">
|
||||
拒绝原因：
|
||||
<view class="" style="margin-top: 21rpx;">
|
||||
<textarea value="" placeholder="输入拒绝原因" class="bg-content_textarea" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="entrust_bga_btn">
|
||||
<view class="determine">
|
||||
接受
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cxNavTitle from '@/components/cx-navTitle.vue'
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import {
|
||||
entrustlist,
|
||||
finishchain,
|
||||
checkchain
|
||||
} from '@/api/sale.js'
|
||||
export default {
|
||||
components: {
|
||||
cxNavTitle,
|
||||
emptyPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
obj: {},
|
||||
activeItem: "tabOne",
|
||||
status: 'loadmore',
|
||||
activeItem: "tabOne",
|
||||
tabTitle: "",
|
||||
orderList: [],
|
||||
where: {
|
||||
page: 1,
|
||||
type: 2,
|
||||
limit: 10,
|
||||
status: 0
|
||||
},
|
||||
tabs: [{
|
||||
name: "tabOne",
|
||||
label: '待处理',
|
||||
type: '0'
|
||||
},
|
||||
{
|
||||
name: "tabTwo",
|
||||
label: '已接受',
|
||||
type: '1'
|
||||
},
|
||||
{
|
||||
name: "tabThree",
|
||||
label: '已拒绝',
|
||||
type: '2'
|
||||
},
|
||||
|
||||
],
|
||||
list: [{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 1
|
||||
|
||||
},
|
||||
{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 2
|
||||
|
||||
},
|
||||
{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 3
|
||||
|
||||
},
|
||||
{
|
||||
content: '张三生产资料供销供应链',
|
||||
day: 10,
|
||||
type: 4
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.tabTitle = this.tabs[0].name
|
||||
//有时进入页面需要获取默认的第一个标签做逻辑判断 -- 如下:
|
||||
console.log(this.tabs[0])
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.commislist()
|
||||
},
|
||||
methods: {
|
||||
onReachBottom() {
|
||||
if (this.status == 'nomore') return;
|
||||
this.status = 'loading';
|
||||
this.where.page = ++this.where.page;
|
||||
this.commislist()
|
||||
},
|
||||
nav(item) {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/commissionedSales/delegation_details/index'
|
||||
// })
|
||||
},
|
||||
//获取分类数据
|
||||
commislist() {
|
||||
entrustlist(this.where).then((res) => {
|
||||
this.orderList.push(...res.data.list)
|
||||
if (res.data.list.length < this.where.limit) this.status = 'nomore'
|
||||
|
||||
if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
//选择
|
||||
tabClick(e) { //点击获取当前标签数据
|
||||
this.activeItem = e.name; //当前class类名
|
||||
this.tabTitle = e.name; //当前选的标签名
|
||||
this.where.page = 1
|
||||
this.orderList = []
|
||||
this.where.status = e.type
|
||||
this.commislist()
|
||||
},
|
||||
//管理弹窗
|
||||
close() {
|
||||
this.$refs.bindmobile.close()
|
||||
this.$refs.bindmobile1.close()
|
||||
this.$refs.bindmobile2.close()
|
||||
this.$refs.bindmobile3.close()
|
||||
},
|
||||
//详情
|
||||
detail(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/commissionedSales/delegation_details/index?id=' + item.community_id
|
||||
})
|
||||
},
|
||||
// 待处理
|
||||
soldEdit(item) {
|
||||
this.obj = item
|
||||
|
||||
this.$refs.bindmobile.open()
|
||||
},
|
||||
//已接受
|
||||
accepted() {
|
||||
|
||||
},
|
||||
//结束委托
|
||||
closingorder(item) {
|
||||
this.obj = item
|
||||
this.$refs.bindmobile1.open()
|
||||
// this.$refs.bindmobile3.open()
|
||||
},
|
||||
//下单
|
||||
order(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/commissionedSales/delegation_details/index?id=' + item.community_id + '&type=1'
|
||||
})
|
||||
},
|
||||
//申请结束委托申请
|
||||
deteragrss(item) {
|
||||
|
||||
finishchain(item.community_id, {
|
||||
status: 1
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabTwo"
|
||||
this.commislist()
|
||||
this.$refs.bindmobile1.close()
|
||||
}).catch((err) => {
|
||||
this.$refs.bindmobile1.close()
|
||||
this.$util.Tips({
|
||||
title: err,
|
||||
icon: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 已拒绝
|
||||
declined() {
|
||||
// this.$refs.bindmobile2.open()
|
||||
this.$refs.bindmobile3.open()
|
||||
},
|
||||
//删除订单
|
||||
deleteOrder(item) {
|
||||
checkchain(item.community_id, {
|
||||
status: 3
|
||||
}).then(res => {
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabOne"
|
||||
this.commislist()
|
||||
})
|
||||
},
|
||||
// 审核未通过 编辑
|
||||
auditEdit() {
|
||||
|
||||
},
|
||||
//审核通过 拒绝
|
||||
passDelete(item) {
|
||||
checkchain(item.community_id, {
|
||||
status: 2
|
||||
}).then((res) => {
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabOne"
|
||||
this.commislist()
|
||||
this.$refs.bindmobile.close()
|
||||
})
|
||||
},
|
||||
//审核通过 同意
|
||||
passagree(item) {
|
||||
checkchain(item.community_id, {
|
||||
status: 1
|
||||
}).then((res) => {
|
||||
this.$util.Tips({
|
||||
title: res.message,
|
||||
icon: 'success'
|
||||
})
|
||||
this.orderList = []
|
||||
this.tabTitle = "tabOne"
|
||||
this.commislist()
|
||||
this.$refs.bindmobile.close()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content_top {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.content_top {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-content {
|
||||
|
||||
margin-top: 21rpx;
|
||||
background: #FFFFFF;
|
||||
padding: 0 28rpx;
|
||||
padding-top: 28rpx;
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
.content-one {
|
||||
display: flex;
|
||||
|
||||
padding-bottom: 23rpx;
|
||||
|
||||
.content-one-img {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
margin-right: 28rpx;
|
||||
border: 1px solid;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content-one-txt {
|
||||
|
||||
|
||||
.txt-b-a {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.one-txt-b {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.txt-b-a {
|
||||
font-size: 32rpx;
|
||||
font-family: SF Pro Display-Medium, SF Pro Display;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-right: 74rpx;
|
||||
}
|
||||
|
||||
.txt-b-b {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content-two_oneq {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
text-align: right;
|
||||
|
||||
.content-two-edita {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editb {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #FE9A10;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editc {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #20A162;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editd {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.contentgn {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 47rpx;
|
||||
|
||||
.contentgn_a {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #F84221;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 0px;
|
||||
height: 30rpx;
|
||||
opacity: 1;
|
||||
|
||||
margin-top: 10rpx;
|
||||
border: 2rpx solid #CCCCCC;
|
||||
|
||||
}
|
||||
|
||||
.contentgn_b {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content-two_one {
|
||||
|
||||
|
||||
|
||||
text-align: right;
|
||||
|
||||
.content-two-edita {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editb {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #FE9A10;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editc {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #20A162;
|
||||
|
||||
}
|
||||
|
||||
.content-two-editd {
|
||||
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.contentgn {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 47rpx;
|
||||
|
||||
.contentgn_a {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #F84221;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 0px;
|
||||
height: 30rpx;
|
||||
opacity: 1;
|
||||
|
||||
margin-top: 10rpx;
|
||||
border: 2rpx solid #CCCCCC;
|
||||
|
||||
}
|
||||
|
||||
.contentgn_b {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.entrust {
|
||||
|
||||
.entrust_close {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.entrust_bg {
|
||||
width: 694rpx;
|
||||
height: 676rpx;
|
||||
background: url('@/static/images/wtbg3.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.entrust_bg-content {
|
||||
position: absolute;
|
||||
top: 284rpx;
|
||||
|
||||
.bg-content-a {
|
||||
margin-left: 242rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bg-content-b {
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-content-c {
|
||||
margin-left: 35rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entrust_bga_btn {
|
||||
display: flex;
|
||||
margin-top: 53rpx;
|
||||
|
||||
.cancellation {
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 121rpx;
|
||||
margin-right: 49rpx;
|
||||
}
|
||||
|
||||
.determine {
|
||||
width: 249rpx;
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.entrust_bga {
|
||||
width: 694rpx;
|
||||
height: 520rpx;
|
||||
background: url('@/static/images/wtbg4.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.entrust_bg-content {
|
||||
position: absolute;
|
||||
top: 284rpx;
|
||||
|
||||
.bg-content-a {
|
||||
margin-left: 242rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.entrust_bga_btn {
|
||||
display: flex;
|
||||
margin-top: 53rpx;
|
||||
|
||||
.cancellation {
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 121rpx;
|
||||
margin-right: 49rpx;
|
||||
}
|
||||
|
||||
.determine {
|
||||
width: 249rpx;
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.entrust_bgb {
|
||||
width: 694rpx;
|
||||
height: 994rpx;
|
||||
background: url('@/static/images/wtbg5.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
|
||||
.entrust_bg-content {
|
||||
position: absolute;
|
||||
top: 304rpx;
|
||||
|
||||
.bg-content-a {
|
||||
margin-left: 242rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bg-content-b {
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-content-c {
|
||||
margin-left: 35rpx;
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 22rpx;
|
||||
|
||||
span {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-content_textarea {
|
||||
width: 624rpx;
|
||||
height: 242rpx;
|
||||
padding: 25rpx 18rpx;
|
||||
|
||||
background: #F5F5F5;
|
||||
}
|
||||
}
|
||||
|
||||
.entrust_bga_btn {
|
||||
display: flex;
|
||||
margin-top: 33rpx;
|
||||
|
||||
|
||||
.determine {
|
||||
margin-left: 188rpx;
|
||||
width: 249rpx;
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
网站已关闭
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.box{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,653 @@
|
|||
<template>
|
||||
<view class="gather">
|
||||
|
||||
|
||||
<view v-if="isFshow">
|
||||
<view class="site-box flex_a_c_j_sb" :style="{ 'opacity': backColor,}" @click="selectLocation">
|
||||
<view :class="['place_wrapper', 'flex_a_c', isFshow ? 'sitebox' : '']" @click="selectLocation">
|
||||
<view :class="['iconfont', 'icon-weizhi', isFshow ? 'sitebox' : '']" style=" margin-left: 20rpx">
|
||||
</view>
|
||||
<view class="town_name">{{ street }}</view>
|
||||
</view>
|
||||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view :class="['iconfont', 'icon-xiaoxi', isFshow ? 'sitebox' : '']"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="" v-if="!isFshow">
|
||||
<view class="site-box1 flex_a_c_j_sb">
|
||||
|
||||
<view class="place_wrapper flex_a_c" @click="selectLocation">
|
||||
<view class="iconfont icon-weizhi"></view>
|
||||
<view class="town_name">{{street}}</view>
|
||||
</view>
|
||||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view class="iconfont icon-xiaoxi" style="color:#fff;"> </view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<zbpSwiper :isSelectPlace="true" :location_Arr="locationArr" :town="street" @kkchange="kkchange"></zbpSwiper>
|
||||
<u-empty :show="jurisdiction" mode="permission" :text="emptyText"
|
||||
icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
|
||||
<view class="business com special_work" v-if="jurisdiction == false">
|
||||
<view class="title project">
|
||||
<view>更多功能</view>
|
||||
<view v-if="!editFlag" class="edit" @click="editFlag = true">编辑</view>
|
||||
<view v-else class="edit" @click="editComfirm">完成</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<block v-if="nowMenuList.length > 0">
|
||||
<u-transition v-for="(item, index) in nowMenuList" :key="item.name" show>
|
||||
<view class="examine" @click="
|
||||
editFlag ? removeMenu(item) : clickMenu(item.type, item.data)
|
||||
">
|
||||
<image class="icon_img" :src="item.icon" mode="aspectFit">
|
||||
</image>
|
||||
<u-icon v-if="editFlag" class="icon" name="minus-circle-fill" color="red"></u-icon>
|
||||
<text class="text">{{ item.name }}</text>
|
||||
</view>
|
||||
</u-transition>
|
||||
</block>
|
||||
<view v-else-if="!editFlag" @click="editFlag = true"
|
||||
style="text-align: center; width: 100%; color: #aaa">还没有应用,点我添加应用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="editFlag" class="business com special_work edit_card">
|
||||
<view class="title project" style="padding: 0 28rpx">
|
||||
<view>编辑功能</view>
|
||||
<view class="edit2" @click="editComfirm">完成</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<u-transition v-for="(item, index) in AllMenuList" :key="item.name" show>
|
||||
<view class="examine" @click="pushMenu(item)">
|
||||
<image class="icon_img" :src="item.icon" mode="aspectFit">
|
||||
</image>
|
||||
<u-icon class="icon" name="plus-circle-fill"></u-icon>
|
||||
<text class="text">{{ item.name }}</text>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
|
||||
@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
|
||||
<!-- <m-tabbar native>
|
||||
<template v-slot:tabbar_index_2>
|
||||
<view class="custom_style">
|
||||
<view class="custom_style_icon"></view>
|
||||
</view>
|
||||
</template>
|
||||
</m-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cache from '@/utils/cache';
|
||||
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
|
||||
|
||||
import zbpSwiper from '@/components/zbpSwiper'
|
||||
import {
|
||||
getArea,
|
||||
getStreet
|
||||
} from '@/api/article.js';
|
||||
import {
|
||||
mapState,
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
import {
|
||||
getWorkArticleCount,
|
||||
getSlideAPI
|
||||
} from '@/api/article.js'
|
||||
import {
|
||||
getStoreList,
|
||||
getUserInfo
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
getGeocoder,
|
||||
microSeachBarCode,
|
||||
microEadtProduct
|
||||
} from '@/api/store.js'
|
||||
import {
|
||||
Toast
|
||||
} from '@/libs/uniApi';
|
||||
import {
|
||||
getDiy
|
||||
} from '@/api/api.js';
|
||||
// #ifdef APP-PLUS
|
||||
import uniMP from '@/utils/uniMP.js';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mTabbar,
|
||||
zbpSwiper
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locationArr: ({}),
|
||||
emptyText: '暂无可用应用',
|
||||
jurisdiction: false, // 是否有权限
|
||||
mer_id: '',
|
||||
userInfoData: {
|
||||
mer_info: {
|
||||
type_id: 0
|
||||
}
|
||||
},
|
||||
prefix: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/11/',
|
||||
isShow: false,
|
||||
bgColor: '',
|
||||
isFshow: false,
|
||||
street: '',
|
||||
// 编辑中标记
|
||||
editFlag: false,
|
||||
// 所有菜单的按钮
|
||||
AllMenuList: [{
|
||||
name: '商户平台',
|
||||
icon: '/static/applet/shop_app.png',
|
||||
data: '/pages/moreProject/moreProject',
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '供销平台',
|
||||
icon: '/static/applet/gx_app.png',
|
||||
data: '__UNI__B5B1EDD',
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
nowMenuList: [],
|
||||
street: '',
|
||||
showPicker: false,
|
||||
columnData: [],
|
||||
bgColor: '',
|
||||
isFshow: false,
|
||||
backColor: 'rgba(252, 252, 252, 0)'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo', 'location', 'isLogin'])
|
||||
},
|
||||
created() {},
|
||||
onLoad() {
|
||||
this.Area()
|
||||
this.initMenu();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.emptyText = '暂无可用应用'
|
||||
this.jurisdiction = false
|
||||
} else {
|
||||
this.emptyText = '请登录'
|
||||
this.jurisdiction = true
|
||||
}
|
||||
this.getUserInfo()
|
||||
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.getUserInfo()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁监听事件
|
||||
this.$bus.$off('value-updated')
|
||||
},
|
||||
mounted() {
|
||||
if (this.street.length <= 0) {
|
||||
this.appLocation()
|
||||
}
|
||||
// #ifdef H5
|
||||
// 监听页面滚动事件
|
||||
window.addEventListener("scroll", this.scrolling);
|
||||
// #endif
|
||||
|
||||
this.$bus.$on('value-updated', (newValue) => {
|
||||
// 更新父组件的值
|
||||
this.street = newValue.split(',')[0]
|
||||
});
|
||||
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
onPageScroll(e) {
|
||||
const scrollTop = e.scrollTop;
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
// #endif
|
||||
|
||||
methods: {
|
||||
scrolling() {
|
||||
// 滚动条距文档顶部的距离
|
||||
let scrollTop =
|
||||
window.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
// 滚动条滚动的距离
|
||||
let scrollStep = scrollTop - this.oldScrollTop;
|
||||
// console.log("header 滚动距离 ", scrollTop);
|
||||
// 更新——滚动前，滚动条距文档顶部的距离
|
||||
this.oldScrollTop = scrollTop;
|
||||
|
||||
//变量windowHeight是可视区的高度
|
||||
let windowHeight =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
//变量scrollHeight是滚动条的总高度
|
||||
let scrollHeight =
|
||||
document.documentElement.scrollHeight || document.body.scrollHeight;
|
||||
|
||||
//滚动条到底部的条件
|
||||
if (scrollTop + windowHeight == scrollHeight) {
|
||||
//你想做的事情
|
||||
// console.log("header 你已经到底部了");
|
||||
}
|
||||
|
||||
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
// 初始化菜单
|
||||
initMenu() {
|
||||
let now = uni.getStorageSync('gatherNowMenuList');
|
||||
try {
|
||||
this.nowMenuList = JSON.parse(now);
|
||||
this.AllMenuList = this.AllMenuList.filter((item) => {
|
||||
return this.nowMenuList.find(t => t.name == item.name)?.name != item.name;
|
||||
})
|
||||
} catch (e) {
|
||||
this.nowMenuList = [];
|
||||
}
|
||||
},
|
||||
clickMenu(e, data) {
|
||||
switch (e) {
|
||||
case 1:
|
||||
this.getUniMp(data);
|
||||
break;
|
||||
case 2:
|
||||
|
||||
// this.getUniMp(data);
|
||||
this.navigator(data);
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 添加菜单
|
||||
pushMenu(data) {
|
||||
this.nowMenuList.push(data);
|
||||
this.AllMenuList = this.AllMenuList.filter((item) => {
|
||||
return item.name != data.name;
|
||||
})
|
||||
},
|
||||
// 移除菜单
|
||||
removeMenu(data) {
|
||||
this.AllMenuList.push(data);
|
||||
this.nowMenuList = this.nowMenuList.filter((item) => {
|
||||
return item.name != data.name;
|
||||
})
|
||||
},
|
||||
// 编辑完成
|
||||
editComfirm() {
|
||||
this.editFlag = false;
|
||||
uni.setStorageSync('gatherNowMenuList', JSON.stringify(this.nowMenuList));
|
||||
},
|
||||
getUniMp(appid) {
|
||||
console.log('点击供销平台');
|
||||
// #ifdef APP-PLUS
|
||||
uniMP.loadMP(appid);
|
||||
return;
|
||||
// #endif
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: 'H5不支持打开小程序'
|
||||
})
|
||||
},
|
||||
changeHandler(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values,
|
||||
index,
|
||||
picker = this.$refs.uPicker
|
||||
} = e;
|
||||
if (columnIndex === 0) {
|
||||
getStreet({
|
||||
area_code: value[0]['code']
|
||||
}).then(res => {
|
||||
this.$refs.uPicker.setColumnValues(1, res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
Area() {
|
||||
getArea({
|
||||
city_code: 510500
|
||||
}).then(res => {
|
||||
this.$refs.uPicker.setColumnValues(0, res.data);
|
||||
this.Street(res.data[0]['code']);
|
||||
});
|
||||
},
|
||||
Street(code) {
|
||||
getStreet({
|
||||
area_code: code
|
||||
}).then(res => {
|
||||
this.$refs.uPicker.setColumnValues(1, res.data);
|
||||
});
|
||||
},
|
||||
selectLocation() {
|
||||
this.showPicker = true
|
||||
},
|
||||
confirm(e) {
|
||||
this.street = e.value[1].name
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);
|
||||
|
||||
})
|
||||
this.showPicker = false
|
||||
},
|
||||
appLocation() {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
timeout: '10',
|
||||
success: (res) => {
|
||||
// console.log(res)
|
||||
this.isshow = false
|
||||
let latitude, longitude;
|
||||
latitude = res.latitude.toString();
|
||||
longitude = res.longitude.toString();
|
||||
getGeocoder({
|
||||
lat: latitude,
|
||||
long: longitude
|
||||
}).then(res => {
|
||||
let town = res.data.address_reference.town.title
|
||||
let street_id = res.data.address_reference.town.id
|
||||
this.street = res.data.address_component.street
|
||||
this.$nextTick(() => {
|
||||
this.$bus.$emit('value-updated', this.street + ',' +
|
||||
street_id);
|
||||
|
||||
})
|
||||
|
||||
}).catch(err => {
|
||||
this.isshow = false
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
this.isshow = false
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
kkchange(e) {
|
||||
this.bgColor = e
|
||||
},
|
||||
|
||||
navigator(url, t) {
|
||||
// if (this.userInfoData.is_wsxx === 0 && t != '商户设置') return Toast("请完善商户信息");
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
getUserInfo: function() {
|
||||
let that = this;
|
||||
getUserInfo().then(res => {
|
||||
that.userInfoData = res.data;
|
||||
// console.log(res.data.service);
|
||||
if (res.data.service == null) {
|
||||
// console.log('123');
|
||||
this.isShow = false
|
||||
} else {
|
||||
this.isShow = true
|
||||
this.mer_id = res.data.service.mer_id
|
||||
}
|
||||
|
||||
if (!res.data.mer_info) {
|
||||
that.$set(this, 'jurisdiction', false);
|
||||
}
|
||||
// console.log(that.userInfoData);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.gather {
|
||||
padding-bottom: 164.91rpx;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sitebox {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.site-box1 {
|
||||
width: 706rpx;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
height: 160rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
height: 120rpx;
|
||||
/* #endif */
|
||||
margin-bottom: 26.32rpx;
|
||||
position: absolute;
|
||||
top: 45rpx;
|
||||
left: 20rpx;
|
||||
|
||||
z-index: 999;
|
||||
// 位置
|
||||
.place_wrapper {
|
||||
color: #fff;
|
||||
margin-right: 0rpx;
|
||||
|
||||
font-size: 30rpx;
|
||||
|
||||
.town_name {
|
||||
margin-left: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 35.09rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.site-box {
|
||||
width: 100%;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
height: 160rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
height: 120rpx;
|
||||
/* #endif */
|
||||
margin-bottom: 26.32rpx;
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
padding-top: 75rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
padding-top: 25rpx;
|
||||
/* #endif */
|
||||
// background-color: #e5e5e5;
|
||||
background: url('@/static/images/bg2.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-right: 20rpx;
|
||||
|
||||
// 位置
|
||||
.place_wrapper {
|
||||
color: #fff;
|
||||
margin-right: 24.56rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
.town_name {
|
||||
margin-left: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
opacity: 0;
|
||||
font-size: 30rpx;
|
||||
font-size: 35.09rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top_box {
|
||||
// padding-top: 180rpx;
|
||||
background: linear-gradient(#36a2ff, #fff);
|
||||
}
|
||||
|
||||
.com {
|
||||
margin-left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.business {
|
||||
width: 694.74rpx;
|
||||
// margin-bottom: 175rpx;
|
||||
}
|
||||
|
||||
.special_work {
|
||||
// padding: 17.54rpx;
|
||||
width: 694.74rpx;
|
||||
margin-top: 52.63rpx;
|
||||
border-radius: 17.54rpx;
|
||||
// box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
|
||||
|
||||
.title {
|
||||
font-size: 31.58rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 38.6rpx;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.edit {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
|
||||
&::after {
|
||||
content: ">";
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.edit2 {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
|
||||
.examine {
|
||||
margin-bottom: 35rpx;
|
||||
width: 173.68rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// margin: 0 0 33.33rpx 33.33rpx !important;
|
||||
|
||||
.icon_img {
|
||||
width: 83.16rpx;
|
||||
height: 83.16rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: -5rpx;
|
||||
right: 25rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 26.32rpx;
|
||||
margin-top: 21.05rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 29.82rpx;
|
||||
color: #a4a4a4;
|
||||
}
|
||||
}
|
||||
|
||||
.cont_jus {
|
||||
margin-top: 56.14rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:first-child {
|
||||
// margin-right: 33rpx;
|
||||
}
|
||||
|
||||
.examine {
|
||||
margin-right: 48rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit_card {
|
||||
background-color: #fff;
|
||||
padding-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,548 @@
|
|||
<template>
|
||||
<view>
|
||||
<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
|
||||
bgcolor="#FFF"></skeleton>
|
||||
<view class='productSort' :style="{visibility: showSkeleton ? 'hidden' : 'visible', height: winHeight+ 'px' }">
|
||||
<view class='header acea-row row-center-wrapper'>
|
||||
<navigator url="/pages/columnGoods/goods_search/index" class='acea-row row-between-wrapper input skeleton-rect' hover-class="none">
|
||||
<text class='iconfont icon-sousuo'></text>
|
||||
<view class="input-box">点击搜索商品信息</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="con-box" :style="viewColor">
|
||||
<view class='aside'>
|
||||
<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true' :scroll-into-view="intoindex">
|
||||
<view v-for="(item,index) in productList">
|
||||
<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-if='item.children && item.children.length > 0'
|
||||
:key="item.store_category_id" @click='tap(index,"b"+item.store_category_id)' :id='"sort"+index'><text class="item_text skeleton-rect">{{item.cate_name}}{{pid}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class='conter'>
|
||||
<scroll-view scroll-y="true" :scroll-into-view="toView" style="height: 100%; overflow: hidden;" @scroll="scroll" scroll-with-animation='true'>
|
||||
<view v-for="(p,i) in productList">
|
||||
<view class='listw' :id="'b'+p.store_category_id+index" v-for="(item,index) in p.children" :key="item.store_category_id">
|
||||
<view class='title acea-row'>
|
||||
<view v-if="hotList.length > 0 && i === 0" class='name skeleton-rect'>
|
||||
<image class="list_title" :src="domain+'/static/diy/recommend_cate'+keyColor+'.png'"></image>
|
||||
</view>
|
||||
<view v-else class='name skeleton-rect'>{{item.cate_name}}</view>
|
||||
</view>
|
||||
<view class='list acea-row'>
|
||||
<block v-for="(itemn,indexn) in item.children" :key="itemn.store_category_id">
|
||||
<navigator hover-class='none' :url="'/pages/columnGoods/goods_list/index?id='+itemn.store_category_id+'&title='+itemn.cate_name"
|
||||
class='item acea-row row-column row-middle'>
|
||||
<view class='picture skeleton-rect'>
|
||||
<easy-loadimage mode="widthFix" :image-src="itemn.pic"></easy-loadimage>
|
||||
</view>
|
||||
<view class='name line1'>{{itemn.cate_name}}</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style='"height:"+(height-300)+"rpx;"'></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<passwordPopup></passwordPopup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="foot" v-if="newData.status && newData.status.status">
|
||||
<view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
|
||||
<view class="foot-item" v-for="(item,index) in newData.menuList" :key="index"
|
||||
@click="goRouter(item)">
|
||||
<block v-if="item.link == activeRouter">
|
||||
<image :src="item.imgList[0]"></image>
|
||||
<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image :src="item.imgList[1]"></image>
|
||||
<view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
let app = getApp();
|
||||
import { getCategoryList } from '@/api/store.js';
|
||||
import { getNavigation } from '@/api/public.js'
|
||||
import { configMap } from '@/utils/index';
|
||||
// #ifndef H5
|
||||
import passwordPopup from '@/components/passwordPopup';
|
||||
// #endif
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
import { mapGetters } from "vuex";
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
export default {
|
||||
components: {
|
||||
easyLoadimage,
|
||||
// #ifndef H5
|
||||
passwordPopup,
|
||||
// #endif
|
||||
},
|
||||
computed: configMap({navigation: {}},mapGetters(['viewColor','keyColor'])),
|
||||
data() {
|
||||
let active = 0;
|
||||
// #ifdef H5
|
||||
active = location.hash.substr(1);
|
||||
// #endif
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
showSkeleton: true, //骨架屏显示隐藏
|
||||
isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
|
||||
navlist: [],
|
||||
hotList: [], //推荐分类
|
||||
productList: [
|
||||
{cate_name: 'skeleton',store_category_id: 0,
|
||||
children:[
|
||||
{cate_name: 'skeleton',store_category_id: 10,children:[
|
||||
{cate_name: '',store_category_id: 101,},
|
||||
{cate_name: '',store_category_id: 102,},
|
||||
{cate_name: '',store_category_id: 103,},
|
||||
{cate_name: '',store_category_id: 104,},
|
||||
{cate_name: '',store_category_id: 105,},
|
||||
{cate_name: '',store_category_id: 106,}
|
||||
]},
|
||||
{cate_name: 'skeleton',store_category_id: 1,
|
||||
children:[
|
||||
{cate_name: '',store_category_id: 101,},
|
||||
{cate_name: '',store_category_id: 102,},
|
||||
{cate_name: '',store_category_id: 103,},
|
||||
{cate_name: '',store_category_id: 104,},
|
||||
{cate_name: '',store_category_id: 105,},
|
||||
{cate_name: '',store_category_id: 106,}
|
||||
]},
|
||||
{cate_name: '',store_category_id: 20}
|
||||
]
|
||||
},
|
||||
{cate_name: 'skeleton',store_category_id: 2,
|
||||
children:[{cate_name:'skeleton',store_category_id: 30}]},
|
||||
{cate_name: 'skeleton',store_category_id: 3,
|
||||
children:[{cate_name:'skeleton',store_category_id: 31}]},
|
||||
{cate_name: 'skeleton',store_category_id: 4,
|
||||
children:[{cate_name:'skeleton',store_category_id: 32}]},
|
||||
{cate_name: 'skeleton',store_category_id: 5,
|
||||
children:[{cate_name:'skeleton',store_category_id: 33}]},
|
||||
{cate_name: 'skeleton',store_category_id: 6,
|
||||
children:[{cate_name:'skeleton',store_category_id: 34}]},
|
||||
{cate_name: 'skeleton',store_category_id: 7,
|
||||
children:[{cate_name:'skeleton',store_category_id: 35}]},
|
||||
{cate_name: 'skeleton',store_category_id: 8,
|
||||
children:[{cate_name:'skeleton',store_category_id: 36}]},
|
||||
{cate_name: 'skeleton',store_category_id: 9,
|
||||
children:[{cate_name:'skeleton',store_category_id: 37}]},
|
||||
{cate_name: 'skeleton',store_category_id: 10,
|
||||
children:[{cate_name:'skeleton',store_category_id: 38}]},
|
||||
{cate_name: 'skeleton',store_category_id: 11,
|
||||
children:[{cate_name:'skeleton',store_category_id: 39}]},
|
||||
],
|
||||
navActive: 0,
|
||||
activceCate: active,
|
||||
number: "",
|
||||
height: 0,
|
||||
hightArr: [],
|
||||
toView: "",
|
||||
winHeight: 0,
|
||||
pidIndex: 0,
|
||||
intoindex: "",
|
||||
pid: '',
|
||||
newData: {},
|
||||
activeRouter: '',
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
const index = uni.getStorageSync('storeIndex');
|
||||
if(options.activceCate){
|
||||
this.activceCate = options.activceCate;
|
||||
}else if(index){
|
||||
this.activceCate = index;
|
||||
uni.removeStorageSync('storeIndex');
|
||||
}
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
that.winHeight = res.windowHeight
|
||||
},
|
||||
});
|
||||
// #ifdef H5
|
||||
document.body.addEventListener('touchmove', function(event) {
|
||||
if (that.$route.path == '/pages/goods_cate/goods_cate') {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, {
|
||||
passive: false
|
||||
});
|
||||
// #endif
|
||||
this.getAllCategory();
|
||||
},
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
// #ifdef MP
|
||||
onShareAppMessage: function() {
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
})
|
||||
return {
|
||||
path: '/pages/goods_cate/goods_cate?activceCate=' + this.productList[this.navActive] ? this.productList[this.navActive].store_category_id : 0
|
||||
}
|
||||
},
|
||||
onShareTimeline: function() {
|
||||
return {
|
||||
query: {
|
||||
activceCate: this.productList[this.navActive] ? this.productList[this.navActive].store_category_id : 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
onShow() {
|
||||
let that = this
|
||||
let routes = getCurrentPages();
|
||||
let curRoute = routes[routes.length - 1].route
|
||||
this.activeRouter = '/' + curRoute
|
||||
let pid = uni.getStorageSync('storeIndex')
|
||||
if(pid) {
|
||||
this.activceCate = pid
|
||||
uni.removeStorageSync('storeIndex');
|
||||
}
|
||||
if(this.activceCate){
|
||||
this.getCateFrom(this.productList)
|
||||
pid && setTimeout(()=>this.tap(this.pidIndex, 'b' + this.activceCate), 200);
|
||||
}
|
||||
that.getNav()
|
||||
},
|
||||
onHide() {},
|
||||
// //点击底部tabbar调用
|
||||
// onTabItemTap() {
|
||||
// this.getAllCategory();
|
||||
// },
|
||||
onReady() {
|
||||
this.isNodes++;
|
||||
},
|
||||
|
||||
methods: {
|
||||
goRouter(item) {
|
||||
var pages = getCurrentPages();
|
||||
var page = (pages[pages.length - 1]).$page.fullPath;
|
||||
if (item.link == page) return
|
||||
uni.switchTab({
|
||||
url: item.link,
|
||||
fail(err) {
|
||||
uni.redirectTo({
|
||||
url: item.link
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getNav() {
|
||||
this.newData = this.navigation
|
||||
if (this.newData.status && this.newData.status.status) {
|
||||
uni.hideTabBar()
|
||||
} else {
|
||||
uni.showTabBar()
|
||||
}
|
||||
},
|
||||
infoScroll: function() {
|
||||
let that = this;
|
||||
//this.number = that.productList[len - 1].children.length;
|
||||
//设置商品列表高度
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
|
||||
},
|
||||
});
|
||||
let hightArr = [];
|
||||
for (let i = 0; i < that.productList.length; i++) {
|
||||
let item = that.productList[i]
|
||||
if(!that.productList[i].children){
|
||||
continue;
|
||||
}
|
||||
for (let j = 0; j < that.productList[i].children.length; j++) {
|
||||
//获取元素所在位置
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
let idView = "#b" + item.store_category_id + j;
|
||||
query.select(idView).boundingClientRect();
|
||||
query.exec(function(res) {
|
||||
if(res[0]){
|
||||
let top = res[0].top;
|
||||
hightArr.push({top,i});
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
that.hightArr = hightArr;
|
||||
},
|
||||
tap: function(index, id) {
|
||||
this.toView = ''+id+0;
|
||||
this.navActive = index;
|
||||
setTimeout(()=>{
|
||||
uni.$emit('scroll');
|
||||
}, 300);
|
||||
},
|
||||
getAllCategory: function() {
|
||||
let that = this;
|
||||
let value = ""
|
||||
that.pidIndex = 0;
|
||||
getCategoryList().then(res => {
|
||||
that.productList = res.data.list;
|
||||
that.hotList = res.data.hot;
|
||||
if(that.hotList.length>0){
|
||||
let hot = {
|
||||
cate_name: '推荐分类',store_category_id: 0,
|
||||
children: [
|
||||
{
|
||||
cate_name:'推荐分类',
|
||||
store_category_id: 1,
|
||||
children:that.hotList
|
||||
}
|
||||
]
|
||||
}
|
||||
that.productList.unshift(hot)
|
||||
}
|
||||
that.getCateFrom(that.productList)
|
||||
that.$nextTick(function(){
|
||||
setTimeout(() => {
|
||||
that.infoScroll();
|
||||
setTimeout(()=>that.tap(that.pidIndex, 'b' + that.activceCate),200);
|
||||
}, 300);
|
||||
})
|
||||
setTimeout(() => {
|
||||
that.showSkeleton = false
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
//获取首页分类来源
|
||||
getCateFrom: function(arr) {
|
||||
let i = ""
|
||||
arr.map((item, index) => {
|
||||
if ((this.activceCate && item.store_category_id == this.activceCate)) {
|
||||
this.pidIndex = index
|
||||
i = 'sort' + index
|
||||
return;
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.intoindex = i
|
||||
})
|
||||
},
|
||||
scroll: function(e) {
|
||||
uni.$emit('scroll');
|
||||
let scrollTop = e.detail.scrollTop + 10;
|
||||
let scrollArr = this.hightArr;
|
||||
for (let i = 0; i < scrollArr.length; i++) {
|
||||
if (scrollTop >= scrollArr[i].top - scrollArr[0].top && scrollTop < (scrollArr[i + 1] ? scrollArr[i + 1].top : 0) - scrollArr[0].top) {
|
||||
this.navActive = scrollArr[i].i
|
||||
} else if (scrollTop >= scrollArr[scrollArr.length - 1].top - scrollArr[0].top) {
|
||||
this.navActive = scrollArr[scrollArr.length - 1].i
|
||||
}else if (scrollTop >= 0 && scrollTop < scrollArr[1].top - scrollArr[0].top) {
|
||||
this.navActive = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
searchSubmitValue: function(e) {
|
||||
if (this.$util.trim(e.detail.value).length > 0)
|
||||
uni.navigateTo({
|
||||
url: '/pages/columnGoods/goods_list/index?searchValue=' + e.detail.value
|
||||
})
|
||||
else
|
||||
return this.$util.Tips({
|
||||
title: '请填写要搜索的产品信息'
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.productSort {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
.con-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.productSort .header {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.productSort .header .input {
|
||||
width: 700rpx;
|
||||
height: 60rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 50rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 25rpx;
|
||||
}
|
||||
|
||||
.productSort .header .input .iconfont {
|
||||
font-size: 35rpx;
|
||||
color: #555;
|
||||
}
|
||||
.productSort .header .input .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
.productSort .header .input .input-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
height: 100%;
|
||||
width: 597rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.productSort .aside {
|
||||
background-color: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.productSort .aside .item {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
color: #424242;
|
||||
}
|
||||
.productSort .aside .item_text {
|
||||
padding-left: 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.productSort .aside .item.on {
|
||||
background-color: #f7f7f7;
|
||||
border-left: 4rpx solid var(--view-theme);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: var(--view-theme);
|
||||
font-weight: bold;
|
||||
}
|
||||
.productSort .conter {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0 14rpx;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.productSort .conter .listw .title {
|
||||
height: 100rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.productSort .conter .listw .title .line {
|
||||
width: 100rpx;
|
||||
height: 2rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.productSort .conter .listw .title .name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin: 0 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.productSort .conter .listw .title .list_title,
|
||||
.productSort .conter .listw .title uni-image,
|
||||
.productSort .conter .listw .title image{
|
||||
width: 110rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 0;
|
||||
}
|
||||
.productSort .conter .list {
|
||||
flex-wrap: wrap;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding-bottom: 26rpx;
|
||||
}
|
||||
.productSort .conter .list .item {
|
||||
width: 174rpx;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
.productSort .conter .list .item .picture,
|
||||
.productSort .conter uni-image,
|
||||
.productSort .conter .list .item image,
|
||||
/deep/.easy-loadimage{
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.productSort .conter .list .item .name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.page-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #F3F3F3;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
|
||||
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
|
||||
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
|
||||
&.filter{
|
||||
filter: blur(2rpx);
|
||||
}
|
||||
.foot-item {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.count-num {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
top: 0rpx;
|
||||
right: -15rpx;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
background-color: #FD502F;
|
||||
border-radius: 50%;
|
||||
padding: 4rpx;
|
||||
}
|
||||
}
|
||||
.foot-item image {
|
||||
height: 50rpx;
|
||||
width: 50rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.foot-item .txt {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<!-- 产品参数 -->
|
||||
<view>
|
||||
<view class="specs" :class="specsInfo.show === true ? 'on' : ''">
|
||||
<view class="title">商品参数<text class="iconfont icon-guanbi5" @click="closeSpecs"></text></view>
|
||||
<view class="list">
|
||||
<view class="item acea-row" v-for="(item,index) in specsInfo.params" :key="index">
|
||||
<view class="name">{{item.name}}</view>
|
||||
<view class="val">{{item.value}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bnt" @click="closeSpecs">完成</view>
|
||||
<slot name="bottom"></slot>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent :hidden="specsInfo.show === false" @click="closeSpecs"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
specsInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
closeSpecs(){
|
||||
this.$emit('myevent');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.specs{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 280;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
padding-bottom: 22rpx;
|
||||
padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
margin: 38rpx 0 36rpx 0;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
.iconfont{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top:0;
|
||||
font-size: 36rpx;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
height: 750rpx;
|
||||
margin: 0 30rpx;
|
||||
color: #999999;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.item{
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
.name{
|
||||
width: 160rpx;
|
||||
margin-right: 10rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
.val{
|
||||
width: 510rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bnt{
|
||||
width: 690rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
border-radius: 43rpx;
|
||||
background-color: var(--view-theme);
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.specs.on{
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,595 @@
|
|||
<template>
|
||||
<view :style="viewColor">
|
||||
<view class="container" :class="popup.show==true?'on':''">
|
||||
<view class="header">
|
||||
<text class="title">优惠套餐({{discountsTotal}})</text>
|
||||
<text class="iconfont icon-guanbi5" @tap.stop="closePopup"></text>
|
||||
</view>
|
||||
<view class="main_count">
|
||||
<scroll-view scroll-y="true">
|
||||
<view v-for="(item, index) in discountsData" :key="index" class="list">
|
||||
<view class="acea-row list_title">
|
||||
<view class="combo_list_name">
|
||||
<image class="title_icon" src="/static/images/combo_title.png"></image>
|
||||
<view class="name line1">套餐{{index+1}}: {{item.title}}</view>
|
||||
</view>
|
||||
<view class="combo_list_money">￥{{item.total_price}}</view>
|
||||
</view>
|
||||
<block v-for="(itemn, indexn) in item.discountsProduct" :key="indexn">
|
||||
<view class="pro_list">
|
||||
<view v-if="item.type == 1 && indexn!=0" class="checkbox" @tap.stop="checkedChange(item,itemn)">
|
||||
<text v-if="itemn.checked" class="iconfont icon-xuanzhong1"></text>
|
||||
<text v-else class="iconfont icon-weixuanzhong"></text>
|
||||
</view>
|
||||
<view v-if="item.type == 1 && indexn ==0" class="checkbox">
|
||||
<text class="iconfont icon-xuanzhong3"></text>
|
||||
</view>
|
||||
<view class="picture">
|
||||
<image :src="itemn.image" class="image"></image>
|
||||
<text v-if="itemn.product_id == id" class="current_pro">当前商品</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name line2">{{itemn.store_name}}</view>
|
||||
<view class="list_attr" @click="selecAttr(index,indexn)">
|
||||
<text class="line1">
|
||||
{{itemn.attr || '默认'}}
|
||||
</text>
|
||||
<text class="iconfont icon-xiangxia"></text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text>
|
||||
￥{{itemn.product.price}}
|
||||
</text>
|
||||
<text class="ot_price">
|
||||
￥{{itemn.product.ot_price}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="save_money">省: ¥ {{item.checked_save_money}}</view>
|
||||
<view v-if="item.is_limit == 0 || (item.is_limit == 1 && item.limit_num > 0)" class="btn" @click="subData(index)">
|
||||
购买此套餐{{item.checked_num}}件商品
|
||||
</view>
|
||||
<view v-else-if="item.is_limit == 1 && item.limit_num <= 0" class="btn disabled">
|
||||
套餐已售罄
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='popup.show==false' @tap="closePopup"></view>
|
||||
<productWindow :attr="attr" :isShow="1" :title="selectTitle" :iSplus="1" @myevent="onMyEvent"
|
||||
@ChangeAttr="ChangeAttr" @attrVal="attrVal" @iptCartNum="iptCartNum" id="product-window" @goCat="goOrder()">
|
||||
</productWindow>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { goShopDetail } from '@/libs/order.js'
|
||||
import { discountsCartAdd, getDiscountsLst } from '@/api/store.js';
|
||||
import productWindow from './productWindow.vue'
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
productWindow
|
||||
},
|
||||
props:{
|
||||
uid: {
|
||||
type: Number,
|
||||
},
|
||||
id: {
|
||||
type: String|| Number,
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['viewColor']),
|
||||
data() {
|
||||
return {
|
||||
discountsData: [],
|
||||
discountsTotal: 0,
|
||||
popup: {
|
||||
show: false
|
||||
},
|
||||
attr: {
|
||||
cartAttr: false,
|
||||
productAttr: [],
|
||||
productSelect: {},
|
||||
},
|
||||
productValue: [], //系统属性
|
||||
isOpen: false, //是否打开属性组件
|
||||
attrValue: [],
|
||||
attrTxt: "",
|
||||
selectAttr: [],
|
||||
selectValue: [], //选中的ID
|
||||
proNum: 0,
|
||||
images: [],
|
||||
selectCountPrice: [],
|
||||
selectTitle: "",
|
||||
seleNum: 0,
|
||||
isFirst: true,
|
||||
seleIndexn: -1,
|
||||
seleIndex: -1,
|
||||
unique: "0"
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(function() {
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 点击关闭按钮
|
||||
closePopup() {
|
||||
this.$set(this.popup, 'show', false);
|
||||
},
|
||||
showPopup(id) {
|
||||
this.id = id
|
||||
this.$set(this.popup, 'show', true);
|
||||
this.getList();
|
||||
},
|
||||
initAttr(){
|
||||
this.discountsData.map((v, i) => {
|
||||
this.getData(i)
|
||||
})
|
||||
},
|
||||
getData(index){
|
||||
this.discountsData[index].discountsProduct.forEach((item, i) => {
|
||||
this.attr.productAttr = item.product.attr;
|
||||
this.productValue = item.product.sku
|
||||
this.DefaultSelect(index,i)
|
||||
this.getPrice(this.discountsData[index])
|
||||
})
|
||||
},
|
||||
/*获取套餐列表数据*/
|
||||
getList(){
|
||||
getDiscountsLst({product_id: this.id}).then(res => {
|
||||
res.data.list.forEach((item, index) => {
|
||||
item.total_price = 0;
|
||||
item.checked_num = item.count;
|
||||
item.checked_save_money = 0;
|
||||
item.discountsProduct.forEach((v, i) => {
|
||||
this.$set(v,'checked',true)
|
||||
this.$set(v,'attr','')
|
||||
this.$set(v,'unique','')
|
||||
item.total_price += parseFloat(v.product.price)
|
||||
item.checked_save_money += (parseFloat(v.product.ot_price) - parseFloat(v.product.price)).toFixed(2)
|
||||
})
|
||||
})
|
||||
this.discountsTotal = res.data.count;
|
||||
this.discountsData = res.data.list;
|
||||
this.initAttr()
|
||||
}).catch(err => {
|
||||
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 购物车手动填写
|
||||
*
|
||||
*/
|
||||
iptCartNum: function(e) {
|
||||
this.$set(this.attr.productSelect, 'cart_num', e);
|
||||
},
|
||||
/**
|
||||
* 打开属性插件
|
||||
*/
|
||||
selecAttr: function(index, n) {
|
||||
this.proNum = index
|
||||
this.seleNum = n
|
||||
this.selectTitle = this.discountsData[index].discountsProduct[n].product.store_name
|
||||
this.attr.productAttr = this.discountsData[index].discountsProduct[n].product.attr
|
||||
this.productValue = this.discountsData[index].discountsProduct[n].product.sku
|
||||
if(this.isFirst || (!this.isFirst &&
|
||||
(this.seleIndex != index && this.seleIndexn != n || this.seleIndex == index && this.seleIndexn != n || this.seleIndex != index && this.seleIndexn == n) || this.unique != this.attr.productSelect.unique)){
|
||||
this.DefaultSelect(index,n)
|
||||
}
|
||||
this.seleIndex = index;this.seleIndexn = n
|
||||
this.isFirst = false
|
||||
|
||||
this.$nextTick((e) => {
|
||||
this.$set(this.attr, 'cartAttr', true);
|
||||
this.$set(this, 'isOpen', true);
|
||||
})
|
||||
},
|
||||
attrVal(val) {
|
||||
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw]
|
||||
.attr_values[val.indexn]);
|
||||
},
|
||||
/**
|
||||
* 属性变动赋值
|
||||
*
|
||||
*/
|
||||
ChangeAttr: function(res) {
|
||||
let productSelect = this.productValue[res];
|
||||
if (productSelect && productSelect.stock > 0) {
|
||||
this.$set(this.attr.productSelect, 'image', productSelect.image);
|
||||
this.$set(this.attr.productSelect, 'price', productSelect.price);
|
||||
this.$set(this.attr.productSelect, 'stock', productSelect.stock);
|
||||
this.$set(this.attr.productSelect, 'product_stock', productSelect.stock);
|
||||
this.$set(this.attr.productSelect, 'unique', productSelect.unique);
|
||||
this.$set(this, 'unique', productSelect.unique);
|
||||
this.$set(this.attr.productSelect, 'cart_num', 1);
|
||||
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum], 'attr', res || "");
|
||||
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum]['product'], 'price', productSelect.price || 0);
|
||||
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum]['product'], 'ot_price', productSelect.ot_price || 0);
|
||||
|
||||
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum], 'unique', productSelect.unique || "");
|
||||
} else {
|
||||
this.$set(this.attr.productSelect,"store_name",this.discountsData[0].discountsProduct[0].product.store_name
|
||||
);
|
||||
this.$set(this.attr.productSelect, "image", this.discountsData[0].discountsProduct[0].product.image);
|
||||
this.$set(this.attr.productSelect, "price", this.discountsData[0].discountsProduct[0].product.price);
|
||||
this.$set(this.attr.productSelect, "ot_price", this.discountsData[0].discountsProduct[0].product.ot_price);
|
||||
this.$set(this.attr.productSelect, "product_stock", 0);
|
||||
this.$set(this.attr.productSelect,"unique", "");
|
||||
return;
|
||||
}
|
||||
this.getPrice(this.discountsData[this.proNum])
|
||||
},
|
||||
|
||||
/**
|
||||
* 默认选中属性
|
||||
*
|
||||
*/
|
||||
DefaultSelect: function(index,indexn) {
|
||||
let productAttr = this.attr.productAttr;
|
||||
let value = [];
|
||||
for (var key in this.productValue) {
|
||||
if (this.productValue[key].stock > 0) {
|
||||
value = this.attr.productAttr.length ? key.split(',') : [];
|
||||
break;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < productAttr.length; i++) {
|
||||
this.$set(productAttr[i], 'index', value[i]);
|
||||
}
|
||||
//sort();排序函数:数字-英文-汉字；
|
||||
let productSelect = this.productValue[value.join(',')];
|
||||
if (productSelect && productAttr.length) {
|
||||
this.$set(this.attr.productSelect, 'store_name', productSelect.store_name);
|
||||
this.$set(this.attr.productSelect, 'image', productSelect.image);
|
||||
this.$set(this.attr.productSelect, 'price', productSelect.price);
|
||||
this.$set(this.attr.productSelect, 'ot_price', productSelect.ot_price);
|
||||
this.$set(this.attr.productSelect, 'stock', productSelect.stock);
|
||||
this.$set(this.attr.productSelect, 'product_stock', productSelect.stock);
|
||||
this.$set(this.attr.productSelect, 'unique', productSelect.unique);
|
||||
this.$set(this, 'unique', productSelect.unique);
|
||||
this.$set(this.attr.productSelect, 'cart_num', 1);
|
||||
this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn], 'unique', productSelect.unique || "");
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn], 'attr', value.join(','));
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'price', productSelect.price);
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'ot_price', productSelect.ot_price);
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'ot_price', productSelect.ot_price);
|
||||
} else if (productSelect && !productAttr.length) {
|
||||
this.$set(this.attr.productSelect, 'store_name', productSelect.store_name);
|
||||
this.$set(this.attr.productSelect, 'image', productSelect.image);
|
||||
this.$set(this.attr.productSelect, 'price', productSelect.price);
|
||||
this.$set(this.attr.productSelect, 'ot_price', productSelect.ot_price);
|
||||
this.$set(this.attr.productSelect, 'stock', productSelect.stock);
|
||||
this.$set(this.attr.productSelect, 'product_stock', productSelect.stock);
|
||||
this.$set(this.attr.productSelect, 'unique', productSelect.unique || '');
|
||||
this.$set(this, 'unique', productSelect.unique);
|
||||
this.$set(this.attr.productSelect, 'cart_num', 1);
|
||||
this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'price', productSelect.price);
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'ot_price', productSelect.ot_price);
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn], 'attr', '')
|
||||
this.$set(this.discountsData[index].discountsProduct[indexn], 'unique', productSelect.unique || "");
|
||||
}else if (!productSelect && !productAttr.length || !productSelect && productAttr.length) {
|
||||
this.$set(this.attr.productSelect,"store_name",this.discountsData[0].discountsProduct[0].product.store_name
|
||||
);
|
||||
this.$set(this.attr.productSelect, "image", this.discountsData[0].discountsProduct[0].product.image);
|
||||
this.$set(this.attr.productSelect, "price", this.discountsData[0].discountsProduct[0].product.price);
|
||||
this.$set(this.attr.productSelect, "ot_price", this.discountsData[0].discountsProduct[0].product.ot_price);
|
||||
this.$set(this.attr.productSelect, "product_stock", 0);
|
||||
this.$set(this.attr.productSelect,"unique", "");
|
||||
this.$set(this, 'unique', "");
|
||||
}
|
||||
},
|
||||
onMyEvent: function() {
|
||||
this.$set(this.attr, 'cartAttr', false);
|
||||
this.$set(this, 'isOpen', false);
|
||||
},
|
||||
checkedChange(item,itemn) {
|
||||
itemn.checked = !itemn.checked
|
||||
if(itemn.checked){
|
||||
item.checked_num++
|
||||
}else{
|
||||
item.checked_num--;
|
||||
}
|
||||
this.getPrice(item)
|
||||
},
|
||||
/*计算此套餐总价及节省价*/
|
||||
getPrice(item){
|
||||
let checked_save_money = 0;
|
||||
let total_price = 0;
|
||||
item.discountsProduct.forEach((v, i) => {
|
||||
if(v.checked){
|
||||
checked_save_money += (parseFloat(v.product.ot_price) - parseFloat(v.product.price));
|
||||
total_price += parseFloat(v.product.price);
|
||||
}
|
||||
})
|
||||
this.$set(item, 'checked_save_money', checked_save_money);
|
||||
this.$set(item, 'total_price', total_price);
|
||||
},
|
||||
subData(index) {
|
||||
let data = []
|
||||
let reqData = {
|
||||
is_new: 1,
|
||||
discount_id: this.discountsData[index].discount_id,
|
||||
data: [],
|
||||
}
|
||||
if (this.discountsData[index].type == 0) {
|
||||
this.selectValue = []
|
||||
this.discountsData[index].discountsProduct.map(v => {
|
||||
this.selectValue.push(v.discount_product_id + '')
|
||||
})
|
||||
} else {
|
||||
if (this.discountsData[index].checked_num < 2) {
|
||||
return this.$util.Tips({
|
||||
title: '请先选择套餐商品'
|
||||
});
|
||||
}
|
||||
this.selectValue = []
|
||||
this.discountsData[index].discountsProduct.map(v => {
|
||||
if(v.checked){
|
||||
this.selectValue.push(v.discount_product_id + '')
|
||||
}
|
||||
})
|
||||
}
|
||||
for (let i = 0; i < this.discountsData[index].discountsProduct.length; i++) {
|
||||
for (let j = 0; j < this.selectValue.length; j++) {
|
||||
if (this.discountsData[index].discountsProduct[i].discount_product_id == this.selectValue[j]) {
|
||||
reqData.data.push({
|
||||
cart_num: 1,
|
||||
product_attr_unique: this.discountsData[index].discountsProduct[i].unique,
|
||||
product_id: this.discountsData[index].discountsProduct[i].product_id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
discountsCartAdd(reqData)
|
||||
.then(function(res) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/order_confirm/index?cartId=' + res
|
||||
.data
|
||||
.cart_id
|
||||
.join(',')
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.selectValue = []
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
goOrder() {
|
||||
this.$set(this, 'isOpen', false);
|
||||
this.$set(this.attr, 'cartAttr', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color: #f5f5f5;
|
||||
z-index: 300;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
max-height: 1000rpx;
|
||||
&.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.header{
|
||||
position: relative;
|
||||
padding: 36rpx 30rpx;
|
||||
text-align: center;
|
||||
|
||||
.title{
|
||||
color: #282828;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.iconfont{
|
||||
color: #8A8A8A;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.icon-guanbi5 {
|
||||
right: 20rpx;
|
||||
color: #8a8a8a;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
top: 40rpx;
|
||||
background-color: transparent;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
}
|
||||
scroll-view{
|
||||
max-height: 1000rpx;
|
||||
}
|
||||
.main_count{
|
||||
padding: 0 20rpx 30rpx;
|
||||
max-height: 800rpx;
|
||||
overflow-y: scroll;
|
||||
.list{
|
||||
margin-bottom: 20rpx;
|
||||
background: #ffffff;
|
||||
padding: 30rpx 20rpx;
|
||||
.list_title{
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.combo_list_name{
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name{
|
||||
max-width: 500rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.title_icon,uni-image,image{
|
||||
width: 26rpx;
|
||||
height:26rpx;
|
||||
}
|
||||
}
|
||||
.combo_list_money{
|
||||
color: var(--view-priceColor);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.btn{
|
||||
width: 670rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background-image: linear-gradient(270deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||
border-radius: 43px;
|
||||
margin: 21rpx auto 0;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
&.disabled{
|
||||
cursor: not-allowed;
|
||||
background:#bbb
|
||||
}
|
||||
}
|
||||
.save_money{
|
||||
color: var(--view-priceColor);
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
.pro_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.checkbox{
|
||||
margin-right: 30rpx;
|
||||
|
||||
}
|
||||
.icon-xuanzhong1{
|
||||
color: var(--view-theme);
|
||||
}
|
||||
.icon-xuanzhong1,.icon-weixuanzhong{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.icon-xuanzhong3{
|
||||
color: var(--view-theme);
|
||||
font-size: 18rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 100%;
|
||||
background: var(--view-minorColor);
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.picture,.image,uni-image{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
}
|
||||
.current_pro{
|
||||
background: linear-gradient(270deg, #F67A38 0%, #F11B09 100%);
|
||||
border-radius: 12rpx 0px 12rpx 12rpx;
|
||||
color: #fff;
|
||||
line-height: 34rpx;
|
||||
height: 34rpx;
|
||||
font-size: 16rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100rpx;
|
||||
}
|
||||
.info{
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
.name{
|
||||
color: #282828;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.price{
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
margin-top: 15rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
text{
|
||||
font-size: 26rpx;
|
||||
|
||||
}
|
||||
.ot_price{
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.list_attr{
|
||||
max-width:390rpx;
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
border-radius: 18rpx;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 60rpx 0 20rpx;
|
||||
margin-top: 15rpx;
|
||||
position: relative;
|
||||
.iconfont{
|
||||
font-size: 12rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 4rpx;
|
||||
}
|
||||
text{
|
||||
display: inline-block;
|
||||
max-width: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/deep/uni-checkbox .uni-checkbox-input{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 100%;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,361 @@
|
|||
<template>
|
||||
<view :style="viewColor">
|
||||
<view class="product-window"
|
||||
:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt?'join':'') + ' ' + (iScart?'joinCart':'')">
|
||||
<text class="iconfont icon-guanbi5" @click.stop="closeAttr"></text>
|
||||
<view class="textpic acea-row row-between-wrapper">
|
||||
<view class="pictrue">
|
||||
<image :src="attr.productSelect.image" @click='getpreviewImage'></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="line1">
|
||||
{{ title }}
|
||||
</view>
|
||||
<view class="money">
|
||||
<view class="acea-row row-middle">
|
||||
￥<text class="num">{{ attr.productSelect.price }}</text>
|
||||
</view>
|
||||
<text class="stock" v-if='isShow'>库存: {{ attr.productSelect.product_stock }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rollTop">
|
||||
<view class="productWinList">
|
||||
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
|
||||
<view class="title">{{ item.attr_name }}</view>
|
||||
<view class="listn acea-row row-middle">
|
||||
<view class="itemn" :class="item.index === itemn.attr ? 'on' : ''" v-for="(itemn, indexn) in item.attr_value"
|
||||
@click="tapAttr(indexw, indexn)" :key="indexn">
|
||||
{{ itemn.attr }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="joinBnt on"
|
||||
v-if="!attr.productSelect || attr.productSelect.product_atock <=0">已售罄
|
||||
</view>
|
||||
<view class="joinBnt" v-if="attr.productSelect.product_stock" @click="goCat">确定</view>
|
||||
<view class="joinBnt on" v-else-if="!attr.productSelect.product_stock">已售罄</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
attr: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
limitNum: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
isShow: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iSbnt: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iSplus: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iScart: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
is_vip: {
|
||||
type: Number,
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['viewColor']),
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
getpreviewImage: function() {
|
||||
uni.previewImage({
|
||||
urls: this.attr.productSelect.image.split(','),
|
||||
current: this.attr.productSelect.image
|
||||
});
|
||||
},
|
||||
goCat: function() {
|
||||
this.$emit('goCat');
|
||||
},
|
||||
|
||||
closeAttr: function() {
|
||||
this.$emit('myevent');
|
||||
},
|
||||
|
||||
tapAttr: function(indexw, indexn) {
|
||||
let that = this;
|
||||
that.$emit("attrVal", {
|
||||
indexw: indexw,
|
||||
indexn: indexn
|
||||
});
|
||||
this.$set(this.attr.productAttr[indexw], 'index', this.attr.productAttr[indexw].attr_values[indexn]);
|
||||
let value = that
|
||||
.getCheckedValue()
|
||||
.join(",");
|
||||
that.$emit("ChangeAttr", value);
|
||||
|
||||
},
|
||||
//获取被选中属性；
|
||||
getCheckedValue: function() {
|
||||
let productAttr = this.attr.productAttr;
|
||||
let value = [];
|
||||
for (let i = 0; i < productAttr.length; i++) {
|
||||
for (let j = 0; j < productAttr[i].attr_values.length; j++) {
|
||||
if (productAttr[i].index === productAttr[i].attr_values[j]) {
|
||||
value.push(productAttr[i].attr_values[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vip-money {
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.vipImg {
|
||||
width: 68rpx;
|
||||
height: 27rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-window {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 920rpx;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 320;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
padding-bottom: 140rpx;
|
||||
padding-bottom: calc(140rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
padding-bottom: calc(140rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
}
|
||||
|
||||
.product-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.product-window .icon-guanbi5{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
color: #8a8a8a;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
.product-window.join {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.product-window.joinCart {
|
||||
padding-bottom: 30rpx;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.product-window .textpic {
|
||||
padding: 0 130rpx 0 30rpx;
|
||||
margin-top: 50rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-window .textpic .pictrue {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text {
|
||||
width: 410rpx;
|
||||
font-size: 32rpx;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money {
|
||||
font-size: 24rpx;
|
||||
margin-top: 40rpx;
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money .num {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money .stock {
|
||||
color: #999;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: -5rpx;
|
||||
font-size: 35rpx;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.product-window .rollTop {
|
||||
max-height: 500rpx;
|
||||
overflow: auto;
|
||||
margin: 36rpx 0;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item~.item {
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .title {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn {
|
||||
padding: 0 30rpx 0 16rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn {
|
||||
border: 1px solid #F2F2F2;
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
padding: 7rpx 33rpx;
|
||||
border-radius: 25rpx;
|
||||
margin: 20rpx 0 0 14rpx;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn.on {
|
||||
color: var(--view-theme);
|
||||
background: var(--view-minorColor);
|
||||
border-color: var(--view-theme);
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn.limit {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.product-window .cart {
|
||||
margin-top: 36rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .title {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum {
|
||||
height: 54rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .iconfont {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum view {
|
||||
// border: 1px solid #a4a4a4;
|
||||
width: 84rpx;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 54rpx;
|
||||
color: #282828;
|
||||
font-size: 45rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .reduce {
|
||||
border-right: 0;
|
||||
border-radius: 6rpx 0 0 6rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .reduce.on {
|
||||
// border-color: #e3e3e3;
|
||||
color: #DEDEDE;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .plus {
|
||||
border-left: 0;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .plus.on {
|
||||
// border-color: #e3e3e3;
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .num {
|
||||
background: rgba(242, 242, 242, 1);
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.product-window .joinBnt {
|
||||
font-size: 30rpx;
|
||||
width: 620rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 65rpx;
|
||||
background-image: linear-gradient(270deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||
}
|
||||
|
||||
.product-window .joinBnt.on {
|
||||
background-color: #bbb;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="swiper-css zqui-rel" :style="{ height: hpx }">
|
||||
<swiper class="swiper" :style="{ height: hpx }" :indicator-dots="indicatorDots" :autoplay="autoplay"
|
||||
disable-touch='true' :interval="interval" :duration="duration" @change="guideAction">
|
||||
<swiper-item v-for="(item, index) in imageList" :key="index" catchtouchmove="stopChange">
|
||||
<image class="image-size" mode="widthFix" :src="item.src" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 按钮样式切换 -->
|
||||
<template v-if="cur != 2">
|
||||
<view class=" flex-column dots">
|
||||
<block v-for="(item,index) in imageList" :key="index">
|
||||
<view class="dot" :class="{'active': index == cur}"></view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 第三张图使用按钮《立即进入》 -->
|
||||
<template v-if="cur == 1">
|
||||
<button class="flex-column cu-btn footer" @click="launchApp">立即体验</button>
|
||||
</template>
|
||||
<!-- 右上角跳过按钮 -->
|
||||
<view class="btn-box" @click="launchApp"><text class="passbtn">{{num}}跳过</text></view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const animation = weex.requireModule('animation');
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//修改图片,文字描述
|
||||
imageList: [{
|
||||
|
||||
src: '/static/images/guide.png'
|
||||
}
|
||||
|
||||
],
|
||||
indicatorDots: false,
|
||||
autoplay: false,
|
||||
interval: 10000,
|
||||
duration: 500,
|
||||
iStatusBarHeight: '0px',
|
||||
hpx: '100%',
|
||||
cur: 0,
|
||||
dotsStyles: '',
|
||||
num: 3
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
let that = this;
|
||||
plus.navigator.closeSplashscreen();
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
that.hpx = res.windowHeight + 'px';
|
||||
}
|
||||
});
|
||||
},
|
||||
onReady() {
|
||||
// this.move(0, 1);
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.countDown()
|
||||
|
||||
},
|
||||
methods: {
|
||||
countDown() {
|
||||
let {
|
||||
num
|
||||
} = this;
|
||||
// if (num === 3) this.nums = true;
|
||||
num = num > 0 ? num - 1 : "GO";
|
||||
setTimeout(() => {
|
||||
this.num = num;
|
||||
if (num == 'GO') {
|
||||
this.launchApp()
|
||||
return
|
||||
}
|
||||
this.countDown();
|
||||
}, 1000);
|
||||
|
||||
|
||||
},
|
||||
|
||||
stopTouchMove: function() {
|
||||
return false;
|
||||
},
|
||||
|
||||
launchApp() {
|
||||
|
||||
//跳过引导页,储存本地值,下次进入直接跳过
|
||||
uni.setStorage({
|
||||
key: 'launchFlag',
|
||||
data: true,
|
||||
success() {
|
||||
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
guideAction(event) {
|
||||
let that = this,
|
||||
index = event.detail.current;
|
||||
that.cur = index;
|
||||
// if (index == 0) {
|
||||
// that.move(0, 1);
|
||||
// that.moveTwo(150, 0.1);
|
||||
// that.moveThree(150, 0.1);
|
||||
// that.lefMainAction(0);
|
||||
// }
|
||||
// if (index == 1) {
|
||||
// that.moveTwo(0, 1);
|
||||
// that.move(150, 0.1);
|
||||
// that.moveThree(150, 0.1);
|
||||
// that.lefMainAction(uni.upx2px(80) + 'px');
|
||||
// }
|
||||
// if (index == 2) {
|
||||
// that.moveThree(0, 1);
|
||||
// that.moveTwo(150, 0.1);
|
||||
// that.move(150, 0.1);
|
||||
// that.lefMainAction(uni.upx2px(160) + 'px');
|
||||
// }
|
||||
},
|
||||
lefMainAction(mum) {
|
||||
var testLM = this.$refs.lefMain;
|
||||
animation.transition(
|
||||
testLM, {
|
||||
styles: {
|
||||
transform: 'translate(' + mum + ',0px)'
|
||||
},
|
||||
duration: 400, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
},
|
||||
move(tran, opa) {
|
||||
var testEl = this.$refs.box1;
|
||||
animation.transition(
|
||||
testEl, {
|
||||
styles: {
|
||||
transform: 'translate(' + tran + 'px,0px)',
|
||||
transformOrigin: 'center center',
|
||||
opacity: opa
|
||||
},
|
||||
duration: 800, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
var textE2 = this.$refs.box2;
|
||||
animation.transition(
|
||||
textE2, {
|
||||
styles: {
|
||||
transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
|
||||
transformOrigin: 'center center',
|
||||
opacity: opa
|
||||
},
|
||||
duration: 800, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
},
|
||||
moveTwo(tran, opa) {
|
||||
var testEl = this.$refs.box3;
|
||||
animation.transition(
|
||||
testEl, {
|
||||
styles: {
|
||||
transform: 'translate(' + tran + 'px,0px)',
|
||||
transformOrigin: 'center center',
|
||||
opacity: opa
|
||||
},
|
||||
duration: 800, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
var textE2 = this.$refs.box4;
|
||||
animation.transition(
|
||||
textE2, {
|
||||
styles: {
|
||||
transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
|
||||
transformOrigin: 'center center',
|
||||
opacity: opa
|
||||
},
|
||||
duration: 800, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
},
|
||||
moveThree(tran, opa) {
|
||||
var testEl = this.$refs.box5;
|
||||
animation.transition(
|
||||
testEl, {
|
||||
styles: {
|
||||
transform: 'translate(' + tran + 'px,0px)',
|
||||
transformOrigin: 'center center',
|
||||
opacity: opa
|
||||
},
|
||||
duration: 800, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
var textE2 = this.$refs.box6;
|
||||
animation.transition(
|
||||
textE2, {
|
||||
styles: {
|
||||
transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
|
||||
transformOrigin: 'center center',
|
||||
opacity: opa
|
||||
},
|
||||
duration: 800, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.guide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.image-size {
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
padding: 250rpx 0 120rpx 64rpx;
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(58, 61, 68, 1);
|
||||
}
|
||||
|
||||
.guide-subtitle {
|
||||
margin-top: 20rpx;
|
||||
font-size: 35rpx;
|
||||
color: rgba(131, 136, 146, 1);
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 231rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 116rpx;
|
||||
left: 37%;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #2B9939;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
right: 40rpx;
|
||||
top: 120rpx;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
height: 151rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
.passbtn {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
border-width: 1rpx;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
border-style: solid;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
padding-left: 25rpx;
|
||||
padding-right: 25rpx;
|
||||
}
|
||||
|
||||
.dot {
|
||||
margin: 0 4rpx;
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
background: #CDD2DD;
|
||||
border-radius: 8rpx;
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
width: 40rpx;
|
||||
background: #838892 !important;
|
||||
}
|
||||
|
||||
/* 相对定位 */
|
||||
.zqui-rel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-css {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 750rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<view class="content"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {
|
||||
this.checkGuide();
|
||||
},
|
||||
methods: {
|
||||
checkGuide() {
|
||||
console.log("进入checkGuide判断页");
|
||||
// 思路： 检测是否有启动缓存，如果没有，就是第一次启动，第一次启动就去 启动介绍页面
|
||||
try {
|
||||
var launchFlag = uni.getStorageSync('launchFlag');
|
||||
// console.log("launchFlag:" + launchFlag);
|
||||
if (launchFlag) { //判断本地缓存跳转首页
|
||||
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
} else { //没有缓存进入启动页引导页
|
||||
console.log('去引导页');
|
||||
uni.redirectTo({
|
||||
url: '/pages/guide/guide'
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,377 @@
|
|||
<template>
|
||||
<view class="Circle_friends">
|
||||
<view class="circle_friends_wrapper">
|
||||
|
||||
<zbpSwiper></zbpSwiper>
|
||||
|
||||
<view class="tabs_wrapper">
|
||||
<u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"></u-tabs>
|
||||
</view>
|
||||
|
||||
<view class="goods">
|
||||
<block v-for="(item,index) in cateGoods" :key="index">
|
||||
<view class="goods_item" @click="gogogo(item)">
|
||||
<image class="goods_img" :src="item.image[0]" mode="aspectFit"></image>
|
||||
<view class="botm">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="goods_info flex_a_c">
|
||||
<view class="l_info flex_a_c">
|
||||
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'"
|
||||
mode="aspectFit" class="g_img"></image>
|
||||
<view class="g_name">{{item.author && item.author.nickname}}</view>
|
||||
</view>
|
||||
<view class="nice_box" @click.stop="giveStart(item)">
|
||||
<text class="iconfont"
|
||||
:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
|
||||
<text class="collect">{{item.count_start}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="empty_wrapper" v-if="emptyShow">
|
||||
<u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
|
||||
@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
|
||||
|
||||
<!-- <view class="bg_color"></view> -->
|
||||
|
||||
<!-- <m-tabbar native>
|
||||
<template v-slot:tabbar_index_2>
|
||||
<view class="custom_style">
|
||||
<view class="custom_style_icon"></view>
|
||||
</view>
|
||||
</template>
|
||||
</m-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
|
||||
import zbpSwiper from '@/components/zbpSwiper'
|
||||
import {
|
||||
getSlideAPI
|
||||
} from '@/api/lihai.js'
|
||||
import {
|
||||
graphicLstApi,
|
||||
getTopicList,
|
||||
graphicStartApi
|
||||
} from '@/api/community.js'
|
||||
import {
|
||||
getIndexData,
|
||||
getDiy
|
||||
} from '@/api/api.js'
|
||||
import {
|
||||
getGeocoder,
|
||||
merClassifly
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getArea,
|
||||
getStreet
|
||||
} from '@/api/article.js';
|
||||
import {
|
||||
Toast
|
||||
} from '@/libs/uniApi'
|
||||
export default {
|
||||
components: {
|
||||
mTabbar,
|
||||
zbpSwiper
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgColor: '',
|
||||
showPicker: false,
|
||||
columnData: [],
|
||||
show: false,
|
||||
swiper: {
|
||||
url: [{
|
||||
img: ''
|
||||
}],
|
||||
indicatorDots: true, // 显示面板指示点
|
||||
vertical: false, // 滑动方向是否为纵向
|
||||
autoplay: true, // 是否自动切换
|
||||
interval: 2000, // 自动切换时间间隔
|
||||
duration: 500 // 滑动动画时长
|
||||
},
|
||||
tabsData: {
|
||||
list: [],
|
||||
tabsActive: 0
|
||||
},
|
||||
where: {
|
||||
category_id: 0,
|
||||
page: 1,
|
||||
limit: 30
|
||||
},
|
||||
currentItemId: 69, // 默认获取 社区的数据 0 表示推荐 || 69 社区
|
||||
keyword: '',
|
||||
location: '',
|
||||
emptyShow: false,
|
||||
street: '',
|
||||
cateGoods: []
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getCateList()
|
||||
this.getGoods()
|
||||
this.selfLocation()
|
||||
this.Area()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onLoad() {
|
||||
this.getCateList()
|
||||
this.getGoods()
|
||||
this.selfLocation()
|
||||
this.Area()
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
confirm(e) {
|
||||
this.where.street_id = e.value[1].code
|
||||
this.showPicker = false
|
||||
},
|
||||
|
||||
changeHandler(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values,
|
||||
index,
|
||||
picker = this.$refs.uPicker
|
||||
} = e;
|
||||
if (columnIndex === 0) {
|
||||
getStreet({
|
||||
area_code: value[0]['code']
|
||||
}).then(res => {
|
||||
this.$refs.uPicker.setColumnValues(1, res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
Area() {
|
||||
getArea({
|
||||
city_code: 510500
|
||||
}).then(res => {
|
||||
this.$refs.uPicker.setColumnValues(0, res.data);
|
||||
this.Street(res.data[0]['code']);
|
||||
});
|
||||
},
|
||||
Street(code) {
|
||||
getStreet({
|
||||
area_code: code
|
||||
}).then(res => {
|
||||
this.$refs.uPicker.setColumnValues(1, res.data);
|
||||
});
|
||||
},
|
||||
gogogo(item) {
|
||||
if (this.tabsData.tabsActive == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/plantGrass/plant_detail/index?id=' + item.community_id
|
||||
})
|
||||
}
|
||||
},
|
||||
giveStart(item) {
|
||||
let status = item.relevance_id ? 0 : 1
|
||||
graphicStartApi(item.community_id, {
|
||||
status: status
|
||||
}).then(res => {
|
||||
Toast(res.message)
|
||||
this.getGoods()
|
||||
})
|
||||
},
|
||||
dianji() {
|
||||
this.show = !this.show
|
||||
},
|
||||
// 获取发现商品
|
||||
getGoods: function() {
|
||||
// 数据写死：默认社区数据 category_id=69&page=1&limit=30
|
||||
graphicLstApi(this.where).then(res => {
|
||||
this.cateGoods = res.data.list
|
||||
res.data.list.length <= 0 ? this.emptyShow = true : this.emptyShow = false
|
||||
})
|
||||
},
|
||||
/*获取分类列表*/
|
||||
async getCateList() {
|
||||
const {
|
||||
data
|
||||
} = await getTopicList()
|
||||
this.tabsData.list = [{
|
||||
cate_name: "推荐",
|
||||
category_id: 0
|
||||
}, {
|
||||
cate_name: "视频",
|
||||
category_id: -1,
|
||||
children: []
|
||||
}, ...data]
|
||||
},
|
||||
tabsChange(item) {
|
||||
this.where.category_id = item.category_id
|
||||
this.getGoods()
|
||||
this.street_id = item.id
|
||||
this.tabsData.tabsActive = item.index
|
||||
if (item.index == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
|
||||
})
|
||||
}
|
||||
},
|
||||
selfLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
let latitude, longitude;
|
||||
latitude = res.latitude.toString();
|
||||
longitude = res.longitude.toString();
|
||||
getGeocoder({
|
||||
lat: latitude,
|
||||
long: longitude
|
||||
}).then(res => {
|
||||
this.$store.commit('setLocation', res.data)
|
||||
this.street = res.data.address_component.street
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
|
||||
}
|
||||
|
||||
.Circle_friends {
|
||||
position: relative;
|
||||
padding: 0 0 87.72rpx 0;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
|
||||
}
|
||||
|
||||
.circle_friends_wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
.search_wrapper {
|
||||
width: 694.74rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tabs_wrapper {
|
||||
width: 694.74rpx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 21.05rpx;
|
||||
}
|
||||
|
||||
.empty_wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.goods {
|
||||
margin: 0 auto;
|
||||
width: 694.74rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods_item {
|
||||
width: 342.11rpx;
|
||||
height: 491.23rpx;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10.53rpx;
|
||||
|
||||
.goods_img {
|
||||
width: 100%;
|
||||
height: 294.74rpx;
|
||||
}
|
||||
|
||||
.botm {
|
||||
flex: 1;
|
||||
padding: 0 14.04rpx;
|
||||
padding-bottom: 21.05rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.goods_info {
|
||||
justify-content: space-between;
|
||||
|
||||
.g_img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.g_name {
|
||||
margin-left: 8.77rpx;
|
||||
width: 100.63rpx;
|
||||
text-overflow: ellipsis;
|
||||
/* 溢出显示省略号 */
|
||||
overflow: hidden;
|
||||
/* 溢出隐藏 */
|
||||
white-space: nowrap;
|
||||
/* 强制不换行 */
|
||||
}
|
||||
|
||||
.nice_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.isshow {
|
||||
color: #FE3530 !important;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.icon-shoucang1 {
|
||||
color: #F84221;
|
||||
}
|
||||
|
||||
.collect {
|
||||
font-size: 24rpx;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<view class="hot-img" :style="'margin-top:' + mbConfig +'rpx;background-color:' + boxColor+';'" v-if="explosiveMoney.length">
|
||||
<!--单行展示-->
|
||||
<block v-if="tabConfig == 0">
|
||||
<view class="item skeleton-rect" v-for="(item, index) in explosiveMoney" :key="index" @click="goDetail(item)">
|
||||
<view class="title area-row">{{ item.info[0].value }}</view>
|
||||
<view class="msg area-row line1">{{ item.info[1].value }}</view>
|
||||
<view class="img">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.img"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!--多行展示-->
|
||||
<block v-if="tabConfig == 1">
|
||||
<view class="bd">
|
||||
<view class="item skeleton-rect" v-for="(item, index) in explosiveMoney" :key="index" @click="goDetail(item)">
|
||||
<view class="left">
|
||||
<view class="title area-row">{{ item.info[0].value }}</view>
|
||||
<view class="msg area-row">{{ item.info[1].value }}</view>
|
||||
</view>
|
||||
<view class="img">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.img"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {merPath} from "@/utils/index"
|
||||
export default {
|
||||
name: 'activeParty',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
explosiveMoney: this.dataConfig.menuConfig.list,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
bgColor: this.dataConfig.bgColor.color,
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
boxColor: this.dataConfig.boxColor.color[0].item,
|
||||
tabConfig: this.dataConfig.tabConfig.tabVal, //展示样式
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
goDetail(url){
|
||||
let urls = url.info[2].value
|
||||
urls = merPath(urls, this.merId)
|
||||
// console.log(urls,'urls');
|
||||
if(urls.indexOf("http") != -1){
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
}else{
|
||||
if(['/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index','/pages/plant_grass/index'].indexOf(urls) == -1){
|
||||
uni.navigateTo({
|
||||
url:urls
|
||||
})
|
||||
}else{
|
||||
uni.switchTab({
|
||||
url:urls
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.hot-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 20rpx 0;
|
||||
padding: 20rpx 0;
|
||||
width: 710rpx;
|
||||
.item {
|
||||
display: block;
|
||||
width: 23.5%;
|
||||
background-color: #fefeff;
|
||||
padding: 20rpx 0 10rpx;
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
box-shadow: 2px 1px 6px 1px rgba(0, 0, 0, 0.03);
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
height: 40rpx;
|
||||
}
|
||||
.msg {
|
||||
margin: 5rpx auto 0;
|
||||
font-size: 20rpx;
|
||||
max-width: 120rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.img {
|
||||
margin: 10rpx auto 0;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 130rpx!important;
|
||||
height: 130rpx!important;
|
||||
}
|
||||
}
|
||||
&:first-child .msg {
|
||||
color: #8fbbe8;
|
||||
}
|
||||
&:nth-child(2) .msg {
|
||||
color: #d797b7;
|
||||
}
|
||||
&:nth-child(3) .msg {
|
||||
color: #c49bd1;
|
||||
}
|
||||
&:nth-child(4) .msg {
|
||||
color: #a3bf95;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bd{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 49%;
|
||||
margin-right: 2%;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
justify-content: space-between;
|
||||
&:nth-child(3),&:nth-child(4){
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
&:nth-child(2n){
|
||||
margin-right: 0;
|
||||
}
|
||||
.left{
|
||||
width: 150rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.img{
|
||||
margin: 0;
|
||||
}
|
||||
/deep/image,/deep/.easy-loadimage,uni-image{
|
||||
width: 120rpx!important;
|
||||
height: 120rpx!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,304 @@
|
|||
<template>
|
||||
<view v-if="assistList.length > 0">
|
||||
<view class="skeleton-rect" :style="'margin-top:'+mbConfig+'rpx;'">
|
||||
<view class="assist-count" :class="'wrapper-count'+styleType" :style="'border-radius:'+bgStyle+'rpx'">
|
||||
<view class="spike-bd">
|
||||
<view class="title line1"><image class="title-img" :src="`${domain}/static/images/assist_title.png`"></image></view>
|
||||
<view v-if="!merId" class="activity_pic">
|
||||
<view v-for="(item, index) in assistUserList" class="picture">
|
||||
<text v-if="item.avatar_img" class="avatar" :style="'background-image: url(' + item.avatar_img + ')'"></text>
|
||||
<text v-else class="avatar" style="background-image: url('/static/images/f.png')"></text>
|
||||
</view>
|
||||
<text class="pic_count">{{ assistUserCount }}人助力成功</text>
|
||||
</view>
|
||||
<navigator v-if="!merId" url="/pages/activity/assist/index" class="more-btn" hover-class="none">
|
||||
更多活动
|
||||
<text class="iconfont icon-jiantou" hover-class="none"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="wapper_count">
|
||||
<view class="spike-wrapper" :class="'wrapper'+styleType">
|
||||
<scroll-view v-if="styleType != 2" :class="'colum'+styleType" :scroll-x="styleType == 0 ? true : false" show-scrollbar="false">
|
||||
<view class="spike-item assist-item" v-for="(item, index) in assistList" :key="index" @click="handleAssist(item.product_assist_id)">
|
||||
<view class="img-box" :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.product.image"></easy-loadimage>
|
||||
<text v-if="joinShow" class="participants">{{ item.user_count }}人参与</text>
|
||||
</view>
|
||||
<view v-if="titleShow || barginShow || priceShow" class="assist-info" :class="'assist-info'+styleType">
|
||||
<view class="price-box presell-price">
|
||||
<view v-if="titleShow" class="name line1">{{ item.store_name }}</view>
|
||||
<view :style="'color:'+themeColor" class="price">
|
||||
<text v-if="barginShow" class="assist_price">助力价</text>
|
||||
<text v-if="priceShow" class="line1 price_num">￥{{ item.assistSku[0].assist_price }}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<button v-if="bntShow" class="initiate_btn" :class="'initiate_btn'+styleType" :style="{background: `linear-gradient(180deg,${bgColor[0].item} 0%,${bgColor[1].item} 100%)`}">发起助力</button>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<block v-else class="acea-row row-between-wrapper combination">
|
||||
<view
|
||||
class="combination-item"
|
||||
v-for="(item, index) in assistList"
|
||||
:key="index"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination${index+1}.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
@click="handleAssist(item.product_assist_id)">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ item.product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ item.product.price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn" :style="{background: `linear-gradient(180deg,${bgColor[0].item} 0%,${bgColor[1].item} 100%)`}">
|
||||
去助力
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.product.image"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="assistList.length == 1"
|
||||
class="combination-item"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination2.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
@click="handleAssist(assistList[0].product_assist_id)">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ assistList[0].product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ assistList[0].product.price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn" :style="{background: `linear-gradient(180deg,${bgColor[0].item} 0%,${bgColor[1].item} 100%)`}">
|
||||
去助力
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="assistList[0].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="assistList.length == 1"
|
||||
class="combination-item"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
@click="handleAssist(assistList[0].product_assist_id)">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ assistList[0].product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ assistList[0].product.price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn" :style="{background: `linear-gradient(180deg,${bgColor[0].item} 0%,${bgColor[1].item} 100%)`}">
|
||||
去助力
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="assistList[0].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="assistList.length == 2"
|
||||
class="combination-item"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
@click="handleAssist(assistList[1].product_assist_id)">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ assistList[1].product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ assistList[1].product.price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn" :style="{background: `linear-gradient(180deg,${bgColor[0].item} 0%,${bgColor[1].item} 100%)`}">
|
||||
去助力
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="assistList[1].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" :isGoIndex="false"></authorize>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getAssistList, assistUserData, initiateAssistApi } from '@/api/activity.js';
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
import authorize from '@/components/Authorize';
|
||||
export default {
|
||||
computed: mapGetters(['isLogin', 'uid']),
|
||||
name: 'bargain',
|
||||
components:{
|
||||
easyLoadimage,
|
||||
authorize
|
||||
},
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
assistList: [], //助力
|
||||
assistUserList: [], //已助力数据
|
||||
assistUserCount: '',
|
||||
mbConfig: this.dataConfig.mbCongfig.val*2,
|
||||
styleType: this.dataConfig.tabConfig.tabVal, //单行，多行，板块
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
|
||||
conStyle: this.dataConfig.conStyle.type ? 16 : 0,
|
||||
bgColor: this.dataConfig.bgColor.color,
|
||||
themeColor: this.dataConfig.priceColor && this.dataConfig.priceColor.color[0].item,
|
||||
priceShow: this.dataConfig.priceShow.val,
|
||||
bntShow: this.dataConfig.bntShow.val,
|
||||
titleShow: this.dataConfig.titleShow.val,
|
||||
barginShow: this.dataConfig.barginShow.val, //助力标签
|
||||
joinShow: this.dataConfig.joinShow.val, //参与标签
|
||||
domain: HTTP_REQUEST_URL,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getAssistUserCount();
|
||||
this.getAssistProduct();
|
||||
},
|
||||
methods: {
|
||||
// 助力
|
||||
getAssistProduct() {
|
||||
let that = this;
|
||||
getAssistList({
|
||||
mer_id: that.merId,limit: that.styleType == 2 ? 3 : 12
|
||||
}).then(res => {
|
||||
that.assistList = res.data.list;
|
||||
}).catch(e => {});
|
||||
},
|
||||
// 获取已助力成功数据
|
||||
getAssistUserCount() {
|
||||
let that = this;
|
||||
assistUserData()
|
||||
.then(res => {
|
||||
that.assistUserCount = res.data.count;
|
||||
that.assistUserList = res.data.list;
|
||||
})
|
||||
.catch(e => {});
|
||||
},
|
||||
handleAssist(id) {
|
||||
if (this.isLogin) {
|
||||
initiateAssistApi(id)
|
||||
.then(res => {
|
||||
let id = res.data.product_assist_set_id;
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/assist_detail/index?id=' + id
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}
|
||||
},
|
||||
// 微信登录回调
|
||||
onLoadFun: function(e) {
|
||||
this.isShowAuth = false;
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../style/main.scss';
|
||||
.assist-count {
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 0 0 20rpx;
|
||||
box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
|
||||
&.wrapper-count2{
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
.activity_pic {
|
||||
margin-left: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background: #dcdcdc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.picture {
|
||||
display: inline-block;
|
||||
}
|
||||
.avatar {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
line-height: 20rem;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: center/cover;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
vertical-align: bottom;
|
||||
font-size: 0.875rem;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border-radius: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
margin-right: -10rpx;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
}
|
||||
.pic_count {
|
||||
margin-left: 30rpx;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
position: relative;
|
||||
top: -4rpx;
|
||||
}
|
||||
}
|
||||
.price_num{
|
||||
display: inline-block;
|
||||
max-width: 100rpx;
|
||||
overflow: hidden;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<view class="blankPage" :style="'height:'+ heightConfig +'rpx;'" v-if="heightConfig>0">
|
||||
<view class="bankCon" :style="'background-color:'+ bgColor +';height:'+ heightConfig +'rpx;'"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'blankPage',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgColor:this.dataConfig.bgColor.color[0].item,
|
||||
heightConfig:this.dataConfig.heightConfig.val
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.blankPage{
|
||||
.bankCon{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<view v-if="combinationList.length > 0" class="skeleton-rect" :style="'margin-top:'+mbConfig+'rpx'">
|
||||
<view class="seckill-count" :class="'wrapper-count'+styleType" :style="'background:'+bgColor+';border-radius:'+bgStyle+'rpx'">
|
||||
<view class="spike-bd">
|
||||
<view class="acea-row row-middle">
|
||||
<image class="title-img" :src="`${domain}/static/images/group_title.png`"></image>
|
||||
</view>
|
||||
<navigator v-if="!merId" url="/pages/activity/combination/index" class="more-btn" hover-class="none">
|
||||
超值团购
|
||||
<text class="iconfont icon-jiantou" hover-class="none"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="spike-wrapper" :class="'wrapper'+styleType">
|
||||
<scroll-view v-if="styleType != 2" :class="'colum'+styleType" :scroll-x="styleType == 0 ? true : false" show-scrollbar="false">
|
||||
<navigator
|
||||
class="spike-item"
|
||||
v-for="(item, index) in combinationList"
|
||||
:key="index"
|
||||
:url="'/pages/activity/combination_details/index?id=' + item.product_group_id"
|
||||
hover-class="none" :class="'img-box'+conStyle">
|
||||
<view class="img-box" :class="'img-box'+conStyle"><image :src="item.product.image" mode=""></image></view>
|
||||
<view class="info">
|
||||
<view v-if="titleShow" class="name line1">{{ item.product.store_name }}</view>
|
||||
<view class="price-box">
|
||||
<text v-if="pinkShow" class="comb-label" :style="'background:'+txtColor+';color:'+themeColor">{{item.buying_count_num}}人团</text>
|
||||
<text v-if="priceShow" class="price" :style="'color:'+themeColor">
|
||||
<text>￥</text>
|
||||
{{ item.price }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="bntShow" class="com_btn">
|
||||
去拼团
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</scroll-view>
|
||||
<block v-else class="acea-row row-between-wrapper combination">
|
||||
<navigator
|
||||
class="combination-item"
|
||||
v-for="(item, index) in combinationList"
|
||||
:key="index"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination${index+1}.png)`}"
|
||||
:url="'/pages/activity/combination_details/index?id=' + item.product_group_id"
|
||||
hover-class="none" :class="'img-box'+conStyle">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ item.product.store_name }}</view>
|
||||
<text v-if="priceShow" class="price" :style="'color:'+themeColor">
|
||||
<text>￥</text>
|
||||
{{ item.price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn">
|
||||
去拼团
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box" :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="combinationList.length == 1"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination2.png)`}"
|
||||
:url="'/pages/activity/combination_details/index?id=' + combinationList[0].product_group_id"
|
||||
:class="'img-box'+conStyle">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ combinationList[0].product.store_name }}</view>
|
||||
<text v-if="priceShow" class="price" :style="'color:'+themeColor">
|
||||
<text>￥</text>
|
||||
{{ combinationList[0].price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn">
|
||||
去拼团
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box" :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="combinationList[0].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="combinationList.length == 1"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`}"
|
||||
:url="'/pages/activity/combination_details/index?id=' + combinationList[0].product_group_id"
|
||||
:class="'img-box'+conStyle">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ combinationList[0].product.store_name }}</view>
|
||||
<text v-if="priceShow" class="price" :style="'color:'+themeColor">
|
||||
<text>￥</text>
|
||||
{{ combinationList[0].price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn">
|
||||
去拼团
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box" :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="combinationList[0].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="combinationList.length == 2"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`}"
|
||||
:url="'/pages/activity/combination_details/index?id=' + combinationList[1].product_group_id"
|
||||
:class="'img-box'+conStyle">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ combinationList[1].product.store_name }}</view>
|
||||
<text v-if="priceShow" class="price" :style="'color:'+themeColor">
|
||||
<text>￥</text>
|
||||
{{ combinationList[1].price }}
|
||||
</text>
|
||||
<text v-if="bntShow" class="gocom_btn">
|
||||
去拼团
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box" :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="combinationList[1].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import { getCombinationList } from '@/api/activity.js';
|
||||
export default {
|
||||
name: 'combination',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
combinationList: [],
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,//主题颜色
|
||||
styleType: this.dataConfig.tabConfig.tabVal, //单行，多行，板块
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
txtColor: this.dataConfig.txtColor.color[0].item,
|
||||
conStyle: this.dataConfig.conStyle.type,
|
||||
priceShow: this.dataConfig.priceShow.val,
|
||||
bntShow: this.dataConfig.bntShow.val,
|
||||
titleShow: this.dataConfig.titleShow.val,
|
||||
pinkShow: this.dataConfig.pinkShow.val,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getCombinationList();
|
||||
},
|
||||
methods: {
|
||||
// 砍价列表
|
||||
getCombinationList() {
|
||||
let that = this;
|
||||
getCombinationList({
|
||||
mer_id: that.merId,
|
||||
page: 1,
|
||||
limit: that.styleType == 2 ? 3 : 12
|
||||
}).then(res => {
|
||||
that.combinationList = res.data.list
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../style/main.scss';
|
||||
.seckill-count {
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 0 26rpx 20rpx;
|
||||
box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
|
||||
&.wrapper-count2{
|
||||
padding: 24rpx 20rpx 26rpx;
|
||||
}
|
||||
}
|
||||
.comb-label{
|
||||
font-size: 24rpx;
|
||||
border-radius: 2rpx;
|
||||
padding: 1rpx 5rpx;
|
||||
}
|
||||
.com_btn{
|
||||
width: 96%;
|
||||
margin: 10rpx auto 0;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
background: linear-gradient(90deg, red 0%, #FF5400 100%);
|
||||
border-radius: 24rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<view class="coupon_main" :style="'margin: 0 '+prConfig+'rpx'">
|
||||
<view class="coupon_count" :style="'margin-top:' + mbConfig +'rpx;border-radius:'+bgStyle+'rpx'" v-if="couponList.length">
|
||||
<view class="acea-row coupon-title">
|
||||
<text>领优惠券</text>
|
||||
<navigator v-if="merId" :url="'/pages/store/home/index?id='+merId+'&coupon=1'" class="more-box" hover-class="none">
|
||||
<view class="txt">查看更多 <text class="iconfont icon-jiantou"></text></view>
|
||||
</navigator>
|
||||
<navigator v-else url="/pages/activity/collect_coupons/index" class="more-box" hover-class="none">
|
||||
<view class="txt">查看更多 <text class="iconfont icon-jiantou"></text></view>
|
||||
</navigator>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; vertical-align: middle;" show-scrollbar="false">
|
||||
<view class="wrapper" v-if="style == 0">
|
||||
<view class="item item0" style="margin-right: 20rpx;" v-for="(item,index) in couponList"
|
||||
:key="index" hover-class="none">
|
||||
<view class="top" :style="{color:`${themeColor}`,backgroundImage: `url(${domain}/static/images/coupon-bg.png)`}">
|
||||
<view class="money"><text>¥</text>{{item.coupon_price}}</view>
|
||||
<view class="info">满{{item.use_min_price}}元可用</view>
|
||||
</view>
|
||||
<navigator hover-class="none" :style="{background:`${themeColor}`}" v-if="item.issue" :url="'/pages/columnGoods/goods_coupon_list/index?coupon_id='+item.coupon_id" class="coupon-btn"><text>去使用</text></navigator>
|
||||
<view :style="{background:`${themeColor}`}" class="coupon-btn" v-else @click="receiveCoupon(item)"><text>立即领取</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper" v-else-if="style == 1">
|
||||
<view class="item item1" :style="{background:`${themeColor}`}" v-for="(item,index) in couponList"
|
||||
:key="index" hover-class="none">
|
||||
<view class="itemCon acea-row row-between-wrapper">
|
||||
<view class="text" :style="{color:`${themeColor}`}">
|
||||
<view class="money"><text>¥</text>{{item.coupon_price}}</view>
|
||||
<view class="info">满{{item.use_min_price}}元可用</view>
|
||||
</view>
|
||||
<navigator v-if="item.issue" :url="'/pages/columnGoods/goods_coupon_list/index?coupon_id='+item.coupon_id" class="bnt"><text>去使用</text></navigator>
|
||||
<view class="bnt" v-else @click="receiveCoupon(item)"><text>立即领取</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {setCouponReceive} from '@/api/api.js';
|
||||
import {getCouponLst} from '@/api/activity.js'
|
||||
import authorize from '@/components/Authorize';
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
name: 'coupon',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
components: {
|
||||
authorize
|
||||
},
|
||||
watch:{
|
||||
isLogin:{
|
||||
handler:function(newV,oldV){
|
||||
if(newV){
|
||||
this.getCoupon();
|
||||
}
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
couponList: [],
|
||||
style: this.dataConfig.tabConfig&&this.dataConfig.tabConfig.tabVal || 0,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
prConfig: this.dataConfig.prConfig&&this.dataConfig.prConfig.val*2,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getCoupon();
|
||||
},
|
||||
methods: {
|
||||
getCoupon: function() {
|
||||
let that = this;
|
||||
getCouponLst({
|
||||
mer_id: that.merId,
|
||||
page: 1,
|
||||
limit: 10
|
||||
}).then(res => {
|
||||
that.$set(that, 'couponList', res.data.list);
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
receiveCoupon: function(item) {
|
||||
let that = this;
|
||||
if (that.isLogin === false) {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
} else {
|
||||
setCouponReceive(item.coupon_id).then(res => {
|
||||
item.issue = 1
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: 'none'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
// 授权回调
|
||||
onLoadFun() {
|
||||
this.isShowAuth = false
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
// 打开授权
|
||||
authOpen: function() {
|
||||
let that = this;
|
||||
if (that.isLogin === false) {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon_main {
|
||||
.coupon_count{
|
||||
background: #ffffff;
|
||||
padding: 0 0 30rpx 20rpx;
|
||||
}
|
||||
.coupon-title {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 20rpx 20rpx 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
.more-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
image {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
margin: 10rpx 0 0 5rpx;
|
||||
}
|
||||
.txt {
|
||||
display: block;
|
||||
.iconfont{
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
&.item0{
|
||||
margin-right: 28rpx;
|
||||
width: 260rpx;
|
||||
height: 194rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
.top{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10rpx;
|
||||
width: 240rpx;
|
||||
height: 124rpx;
|
||||
background-size: 100% 100%;
|
||||
color: #E93323;
|
||||
.money{
|
||||
margin: 8rpx 0 2rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
text{
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.coupon-btn{
|
||||
width: 260rpx;
|
||||
height: 160rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-items: center;
|
||||
justify-content: flex-end;
|
||||
border-radius: 24rpx;
|
||||
background: #E93323;
|
||||
text{
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.item1{
|
||||
width: 244rpx;
|
||||
height: 126rpx;
|
||||
background: #BBBBBB;
|
||||
border-radius: 14rpx;
|
||||
color: #fff;
|
||||
margin-right: 24rpx;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
left: -8rpx;
|
||||
top: 54rpx;
|
||||
}
|
||||
}
|
||||
.itemCon {
|
||||
width: 244rpx;
|
||||
height: 128rpx;
|
||||
.text {
|
||||
width: 198rpx;
|
||||
height: 130rpx;
|
||||
padding: 18rpx 0;
|
||||
margin: -2rpx 0 0 -1rpx;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 14rpx;
|
||||
.money {
|
||||
font-size: 48rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.bnt {
|
||||
float: right;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
font-size: 20rpx;
|
||||
writing-mode: vertical-lr;
|
||||
line-height: 1.2;
|
||||
width: 46rpx;
|
||||
height: 128rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<view style="touch-action: none;" v-if="is_open_service != '0' || merId != '0'">
|
||||
<view class="customerService" @touchmove.stop.prevent="setTouchMove" :style="{top:topConfig}">
|
||||
<navigator class="pictrue" :url="'/pages/chat/customer_list/chat?mer_id='+merId" hover-class="none">
|
||||
<image :src="logoConfig"></image>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { configMap } from '@/utils/index';
|
||||
export default {
|
||||
name: 'customerService',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
computed: configMap({ is_open_service:0 }),
|
||||
data() {
|
||||
return {
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
topConfig: (this.dataConfig.topConfig.val || 75)+'%'
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
setTouchMove(e) {
|
||||
var that = this;
|
||||
if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
|
||||
that.topConfig = e.touches[0].clientY+'px'
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customerService {
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
z-index: 999;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
top: 160rpx;
|
||||
right: 0;
|
||||
/* #endif */
|
||||
.pictrue {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50%;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<view v-if='!subscribe'>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="follow acea-row row-between-wrapper" :style="'background:' + bgColor + ';margin-top:' + mbConfig + 'rpx;margin-left:'+prConfig+'rpx;margin-right:'+prConfig+'rpx;'">
|
||||
<view class="picTxt acea-row row-middle">
|
||||
<view class="pictrue"><image :src="imgConfig"></image></view>
|
||||
<view class="name line1">{{ titleConfig }}</view>
|
||||
</view>
|
||||
<view class="notes acea-row row-center-wrapper" :style="'color:' + themeColor + ';border-color:' + themeColor + ';'" @click="followTap">关注</view>
|
||||
</view>
|
||||
<view class="followCode" v-if="followCode">
|
||||
<view class="pictrue">
|
||||
<view class="code-bg" :style="{ 'background-image': `url(${domain}/static/images/code-bg.png)`}"><img class="imgs" :src="followUrl" /></view>
|
||||
</view>
|
||||
<view class="mask" @click="closeFollowCode"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import { getSubscribe } from '@/api/public';
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
export default {
|
||||
name: 'follow',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
followCode: false,
|
||||
followUrl:this.dataConfig.codeConfig.url,
|
||||
bgColor:this.dataConfig.bgColor.color[0].item,
|
||||
imgConfig:this.dataConfig.imgConfig.url,
|
||||
mbConfig:this.dataConfig.mbConfig.val*2,
|
||||
prConfig:this.dataConfig.prConfig&&this.dataConfig.prConfig.val*2 || 0,
|
||||
themeColor:this.dataConfig.themeColor.color[0].item,
|
||||
titleConfig:this.dataConfig.titleConfig.value,
|
||||
subscribe: true
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
getSubscribe().then(res => {
|
||||
this.subscribe = res.data.subscribe;
|
||||
}).catch(() => {})
|
||||
},
|
||||
methods: {
|
||||
followTap(){
|
||||
this.followCode = true;
|
||||
},
|
||||
closeFollowCode(){
|
||||
this.followCode = false
|
||||
},
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.follow {
|
||||
padding: 0 20rpx;
|
||||
height: 140rpx;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
.picTxt {
|
||||
.pictrue {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 50%;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
margin-left: 32rpx;
|
||||
width: 400rpx;
|
||||
}
|
||||
}
|
||||
.notes {
|
||||
font-size: 28rpx;
|
||||
color: #02a0e8;
|
||||
width: 120rpx;
|
||||
height: 52rpx;
|
||||
border: 2rpx solid rgba(2, 160, 232, 1);
|
||||
opacity: 1;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
.followCode {
|
||||
.pictrue {
|
||||
width: 500rpx;
|
||||
height: 720rpx;
|
||||
border-radius: 12px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -250rpx;
|
||||
margin-top: -360rpx;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
.code-bg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.imgs {
|
||||
width: 310rpx;
|
||||
height: 310rpx;
|
||||
margin-top: 92rpx;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
<template>
|
||||
<view class="index-product-wrapper" :style="{ marginTop: mbConfig + 'rpx', background: themeColor,borderRadius: bgStyle+'rpx'}" v-if="tempArr.length">
|
||||
<!-- 单列 -->
|
||||
<block v-if="itemStyle == 0">
|
||||
<view class="list-box animated listA" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
||||
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
|
||||
<view class="pictrue" :class="'cont'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
||||
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
|
||||
</view>
|
||||
<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<view>
|
||||
<view v-if="titleShow" class="title">{{ item.store_name }}</view>
|
||||
<view class="merchant_info">
|
||||
<view v-if="item.merchant && item.merchant.type_name" :style="'background:'+labelColor" class="font-bg-red">{{item.merchant.type_name}}</view>
|
||||
<view class="txt" :style="'border-color:'+priceColor+';color:'+priceColor+';'" v-if="item.issetCoupon && couponShow">领券</view>
|
||||
<view class="txt delivery" v-if="item.delivery_free">包邮</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="priceShow" class="price acea-row" :style="'color:'+priceColor">
|
||||
<view>
|
||||
¥
|
||||
<text>{{ item.price }}</text>
|
||||
</view>
|
||||
<view v-if="opriceShow" class="ot-price">¥{{item.ot_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 两列 -->
|
||||
<block v-if="itemStyle == 1">
|
||||
<view class="list-box listS animated" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
||||
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)" :style="'border-radius:'+bgStyle+'rpx;'">
|
||||
<view class="pictrue picture1" :class="'cont'+conStyle">
|
||||
<!-- <image :src="item.image" mode=""></image> -->
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
||||
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
|
||||
</view>
|
||||
<view class="text-info" style="background:#fff;">
|
||||
<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
|
||||
<view v-if="priceShow" class="price acea-row" :style="'color:'+priceColor">
|
||||
¥<text>{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 三列 -->
|
||||
<block v-if="itemStyle == 2">
|
||||
<view class="list-box animated listB" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
||||
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)" :style="'border-radius:'+bgStyle+'rpx;'">
|
||||
<view class="pictrue" :class="'cont'+conStyle">
|
||||
<!-- <image :src="item.image" mode=""></image> -->
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
||||
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
|
||||
</view>
|
||||
<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
|
||||
<view v-if="priceShow" class="price">
|
||||
<view v-if="priceShow" :style="'color:'+priceColor">
|
||||
¥<text>{{ item.price }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!--大图-->
|
||||
<block v-if="itemStyle == 3">
|
||||
<view class="list-box animated listC" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
|
||||
<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)" :style="'border-radius:'+bgStyle+'rpx;'">
|
||||
<view class="pictrue" :class="'cont'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
|
||||
<view v-if="priceShow || opriceShow" class="price">
|
||||
<view v-if="priceShow" :style="'color:'+priceColor">
|
||||
¥<text>{{ item.price }}</text>
|
||||
</view>
|
||||
<view v-if="opriceShow" class="old-price">
|
||||
¥{{ item.ot_price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProductslist } from '@/api/store.js';
|
||||
export default {
|
||||
name: 'goodList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tempArr: [],
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
numConfig: this.dataConfig.numConfig.val ? this.dataConfig.numConfig.val : this.dataConfig.numConfig.val,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
priceColor: this.dataConfig.fontColor.color[0].item,
|
||||
labelColor: this.dataConfig.labelColor.color[0].item,
|
||||
itemStyle: this.dataConfig.itemStyle.type,
|
||||
sortType: this.dataConfig.goodsSort.type,
|
||||
conStyle: this.dataConfig.conStyle.type,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? '20' : '0',
|
||||
type: this.dataConfig.tabConfig.tabVal || 0,
|
||||
selectId: this.dataConfig.selectConfig.activeValue || 0,
|
||||
productIds: this.dataConfig.goodsList.ids || [],
|
||||
titleShow: this.dataConfig.titleShow.val,
|
||||
opriceShow: this.dataConfig.opriceShow.val,
|
||||
priceShow: this.dataConfig.priceShow.val,
|
||||
couponShow: this.dataConfig.couponShow.val
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.productslist();
|
||||
},
|
||||
methods: {
|
||||
productslist() {
|
||||
let data = {};
|
||||
if (this.type == 1) {
|
||||
data = {
|
||||
mer_id: this.merId,
|
||||
product_ids: this.productIds.toString(),
|
||||
limit: this.productIds.length,
|
||||
type: 1
|
||||
};
|
||||
} else {
|
||||
data = {
|
||||
mer_id: this.merId,
|
||||
order: this.sortType == 2 ? 'price_asc' : this.sortType == 1 ? 'sales' : '',
|
||||
limit: this.numConfig,
|
||||
type: 1
|
||||
};
|
||||
if(this.merId){
|
||||
data.mer_cate_id = this.selectId.toString()
|
||||
}else{
|
||||
data.cate_pid = this.selectId.toString()
|
||||
}
|
||||
}
|
||||
getProductslist(data).then(res => {
|
||||
this.tempArr = res.data.list;
|
||||
});
|
||||
},
|
||||
goDetail(item) {
|
||||
this.$emit('detail', item);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-product-wrapper {
|
||||
margin: 30rpx 20rpx 0 20rpx;
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 0;
|
||||
.item {
|
||||
width: 328rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
&.on {
|
||||
border-radius: 0;
|
||||
}
|
||||
.pictrue_log {
|
||||
width: 92rpx;
|
||||
height: 44rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
}
|
||||
.picture1,/deep/.picture1 image,/deep/.picture1 .easy-loadimage,/deep/.picture1 uni-image {
|
||||
height: 346rpx;
|
||||
position: relative;
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
.sell_out {
|
||||
display: flex;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: rgba(0,0,0,.6);
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -75rpx 0 0 -75rpx;
|
||||
&::before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 100%;
|
||||
border: 1px dashed #fff;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cont1,/deep/.cont1 image,/deep/.cont1 .easy-loadimage,/deep/.cont1 uni-image,.cont1 .border-picture{
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.text-info {
|
||||
padding: 10rpx 20rpx 15rpx;
|
||||
.title {
|
||||
color: #222222;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.old-price {
|
||||
margin-top: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
text {
|
||||
margin-right: 2px;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
align-items: center;
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 550;
|
||||
}
|
||||
.ot-price{
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
text-decoration: line-through;
|
||||
margin-left: 6rpx;
|
||||
font-weight: normal;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pictrue {
|
||||
position: relative;
|
||||
}
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
}
|
||||
.merchant_info{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
.merchant_type{
|
||||
color: #fff;
|
||||
line-height: 30rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 2rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 15rpx;
|
||||
border: 1px solid $theme-color;
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
&.delivery{
|
||||
margin-left: 0;
|
||||
color: #FF9000;
|
||||
border-color: #FF9000;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.on {
|
||||
display: flex;
|
||||
}
|
||||
&.listA {
|
||||
.item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
.sell_out {
|
||||
display: flex;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: rgba(0,0,0,.6);
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -55rpx 0 0 -55rpx;
|
||||
&::before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100%;
|
||||
border: 1px dashed #fff;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
}
|
||||
}
|
||||
.text-info {
|
||||
width: 490rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.listB {
|
||||
justify-content: inherit;
|
||||
.item {
|
||||
width: 31.3%;
|
||||
margin-right: 3.05%;
|
||||
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
height: 220rpx;
|
||||
}
|
||||
.sell_out {
|
||||
display: flex;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: rgba(0,0,0,.6);
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -55rpx 0 0 -55rpx;
|
||||
&::before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100%;
|
||||
border: 1px dashed #fff;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
}
|
||||
}
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
text{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.text-info{
|
||||
padding: 10rpx 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.listC{
|
||||
.item{
|
||||
width: 100%;
|
||||
.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image{
|
||||
height: 320rpx;
|
||||
}
|
||||
.price{
|
||||
margin-top: 20rpx;
|
||||
font-size: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.old-price{
|
||||
font-weight: normal;
|
||||
font-size: 22rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.listS{
|
||||
.price{
|
||||
font-size: 40rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.old-price{
|
||||
font-weight: normal;
|
||||
font-size: 22rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<view class="lines" :style="'padding:0 '+ lrEdge +'rpx;margin-top:'+ mbConfig +'rpx;'" v-if="heightConfig">
|
||||
<view class="item" :style="'border-bottom-width:'+ heightConfig +'rpx;border-bottom-color:'+ lineColor +';border-bottom-style:'+ lineStyle +';'"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'guide',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
heightConfig:this.dataConfig.heightConfig.val,
|
||||
lineColor:this.dataConfig.lineColor.color[0].item,
|
||||
lineStyle:this.dataConfig.lineStyle.type == 0 ? 'dashed' : this.dataConfig.lineStyle.type == 1 ? 'solid' : 'dotted',
|
||||
lrEdge:this.dataConfig.lrEdge.val,
|
||||
mbConfig:this.dataConfig.mbConfig.val*2
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lines{
|
||||
padding: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
.item{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom-color: red;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="header" :style="'background: '+ bgColor +' ;margin-top:'+ mbConfig +'rpx;'">
|
||||
<view class="serch-wrapper acea-row row-between-wrapper" :style="'padding-left:'+prConfig+'rpx;'">
|
||||
<view v-if="logoConfig" class="logo skeleton-rect">
|
||||
<image :src="logoConfig" mode=""></image>
|
||||
</view>
|
||||
<navigator :url="merId ? '/pages/store/list/index?mer_id='+merId : '/pages/columnGoods/goods_search/index'" :class="logoConfig ? 'input' : 'uninput'" class="skeleton-rect box" hover-class="none"
|
||||
:style="'border-radius:'+boxStyle+'rpx;text-align:'+txtStyle">
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
搜索商品
|
||||
</navigator>
|
||||
<navigator class="btn skeleton-rect" url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view class="iconfont icon-xiaoxi" :style="'color:'+iconColor"></view>
|
||||
<text class="iconnum" v-if="userInfo.total_unread">{{ userInfo.total_unread }}</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<view>
|
||||
<view class="mp-header" :style="'background: '+ bgColor +' ;margin-top:'+ mbConfig +'rpx;'">
|
||||
<view class="sys-head skeleton-rect" :style="{ height: statusBarHeight }"></view>
|
||||
<view class="serch-box skeleton-rect" style="height: 43px;">
|
||||
<view class="serch-wrapper flex" :style="'padding-left:'+prConfig+'rpx;'">
|
||||
<view v-if="logoConfig" class="logo skeleton-rect"><image :src="logoConfig" mode=""></image></view>
|
||||
<navigator :url="merId ? '/pages/store/list/index?mer_id='+merId : '/pages/columnGoods/goods_search/index'" :class="logoConfig ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect box" :style="'border-radius:'+boxStyle+'rpx;text-align:'+txtStyle">
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
搜索商品
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="'height:'+marTop+'px;'"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight*2 + 'rpx';
|
||||
export default {
|
||||
name: 'headerSerch',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight,
|
||||
marTop:0,
|
||||
searchH: 0,
|
||||
bgColor: this.dataConfig.bgColor && this.dataConfig.bgColor.color[0].item,
|
||||
iconColor: this.dataConfig.iconColor && this.dataConfig.iconColor.color[0].item,
|
||||
boxStyle: this.dataConfig.boxStyle.type ? '0' : '32',
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
prConfig: this.dataConfig.prConfig.val*2,
|
||||
txtStyle: this.dataConfig.txtStyle.type ? 'center' : 'xleft',
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
let that = this;
|
||||
// #ifdef H5
|
||||
// 获取H5 搜索框高度
|
||||
setTimeout(() => {
|
||||
let appSearchH = uni.createSelectorQuery().select('.serch-wrapper');
|
||||
appSearchH
|
||||
.boundingClientRect(function(data) {
|
||||
that.searchH = data.height;
|
||||
})
|
||||
.exec();
|
||||
}, 800);
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
setTimeout(() => {
|
||||
// 获取小程序头部高度
|
||||
let info = uni.createSelectorQuery().in(this).select(".mp-header");
|
||||
info.boundingClientRect(function(data) {
|
||||
that.marTop = data.height
|
||||
}).exec()
|
||||
}, 300)
|
||||
// #endif
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
.btn {
|
||||
position: relative;
|
||||
margin-left: 30rpx;
|
||||
.iconfont {
|
||||
font-size: 45rpx;
|
||||
}
|
||||
}
|
||||
.iconnum {
|
||||
min-width: 6px;
|
||||
color: #fff;
|
||||
background: #e93323;
|
||||
border-radius: 15rpx;
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -10rpx;
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.serch-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx 20rpx 30rpx;
|
||||
.box{
|
||||
flex: 1;
|
||||
}
|
||||
.logo {
|
||||
width: 127rpx;
|
||||
height: 46rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
image {
|
||||
width: 118rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
.input,.uninput {
|
||||
line-height: 64rpx;
|
||||
padding: 0 0 0 30rpx;
|
||||
background: rgba(237, 237, 237, 1);
|
||||
border: 1px solid rgba(241, 241, 241, 1);
|
||||
color: #bbbbbb;
|
||||
font-size: 28rpx;
|
||||
.iconfont {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
.mp-header {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
padding-bottom: 20rpx;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
.serch-wrapper {
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding: 0 50rpx 0 53rpx;
|
||||
image {
|
||||
width: 118rpx;
|
||||
height: 42rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.input,.uninput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* #ifndef APP-PLUS */
|
||||
width: 305rpx;
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS */
|
||||
flex: 1;
|
||||
width: 500rpx;
|
||||
/* #endif */
|
||||
height: 58rpx;
|
||||
padding: 0 0 0 30rpx;
|
||||
background: rgba(247, 247, 247, 1);
|
||||
border: 1px solid rgba(241, 241, 241, 1);
|
||||
border-radius: 29rpx;
|
||||
color: #bbbbbb;
|
||||
font-size: 28rpx;
|
||||
.iconfont {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.uninput {
|
||||
/* #ifdef MP */
|
||||
min-width: 450rpx;
|
||||
max-width: 480rpx;
|
||||
/* #endif*/
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,675 @@
|
|||
<template>
|
||||
<view class="page_count">
|
||||
<view class="bg-img">
|
||||
<img :src="bgColor" alt="">
|
||||
</view>
|
||||
<!--搜索-->
|
||||
<view :class="{scrolled:isScrolled}" class="my-main">
|
||||
<!-- #ifdef H5 -->
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="sys-head tui-skeleton" :style="{ height: statusBarHeight }"></view>
|
||||
<view class="serch-box tui-skeleton">
|
||||
<view class="serch-wrapper flex">
|
||||
<view v-if="logoConfig || site_logo" class="logo skeleton-rect"><image :src="logoConfig || site_logo" mode="widthFix"></image></view>
|
||||
<navigator v-if="hotWords.length > 0" :url="'/pages/columnGoods/goods_search/index?searchVal='+searchVal" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect box">
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true"
|
||||
circular="true" @change="textChange">
|
||||
<block v-for="(item,index) in hotWords" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
<navigator v-else url="/pages/columnGoods/goods_search/index" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect">
|
||||
搜索商品
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
<navigator class="btn skeleton-rect" url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
|
||||
<text class="iconnum" v-if="userInfo.total_unread">{{ userInfo.total_unread }}</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="'height:'+isTop+'px'"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<view>
|
||||
<view class="mp-header" id="home">
|
||||
<view class="sys-head tui-skeleton" :style="{ height: statusBarHeight }"></view>
|
||||
<view class="serch-box tui-skeleton">
|
||||
<view class="serch-wrapper flex">
|
||||
<view v-if="logoConfig || site_logo" class="logo skeleton-rect"><image :src="logoConfig || site_logo" mode="widthFix"></image></view>
|
||||
<navigator v-if="hotWords.length > 0" :url="'/pages/columnGoods/goods_search/index?searchVal='+searchVal" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect box">
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true"
|
||||
circular="true" @change="textChange">
|
||||
<block v-for="(item,index) in hotWords" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
<navigator v-else url="/pages/columnGoods/goods_search/index" :class="(logoConfig || site_logo) ? 'input' : 'uninput'"
|
||||
hover-class="none" class="skeleton-rect">
|
||||
搜索商品
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="'height:'+marTop+'px;'"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!--选项卡-->
|
||||
<view style="visibility: hidden;" :style="{ height: navHeight + 'px' }"></view>
|
||||
<view class="navTabBox tabNav" :class="{bgwhite:isScrolled}" :style="'top:'+isTop+'px'">
|
||||
<view class="longTab" :style='"width:"+mainWidth+"px"'>
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
|
||||
<view class="longItem" :data-index="index" :class="index===tabClick?'click':''" @click="changeTab(item,index)" v-for="(item,index) in tabTitle" :key="index" :id="'id'+index">{{item.info[0].value}}</view>
|
||||
<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
|
||||
<view class="underline"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--轮播图-->
|
||||
<view class="swiperBg" :style="{ marginTop: swiperTop+'px'}">
|
||||
<block>
|
||||
<view class="swiper page_swiper"
|
||||
v-if="imgUrls.length">
|
||||
<swiper
|
||||
:autoplay="true"
|
||||
:circular="circular"
|
||||
:interval="intervals"
|
||||
:duration="duration"
|
||||
indicator-color="rgba(255,255,255,0.6)"
|
||||
indicator-active-color="#fff"
|
||||
:current="swiperCur"
|
||||
previous-margin="30rpx"
|
||||
next-margin="30rpx"
|
||||
@change="swiperChange"
|
||||
:class="{ scalex:isScale }"
|
||||
>
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" class="slide-image aa"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<view class="dots">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<view class="dot" :class="index == swiperCur ? ' active' : ''"></view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||||
import { configMap } from '@/utils';
|
||||
export default {
|
||||
name: 'homeComb',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isScrolled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScale: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
computed: configMap({site_logo: ''}),
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight,
|
||||
scrollHeight: 0,
|
||||
autoplay: true,
|
||||
interval: this.dataConfig.titleConfig.value * 1000 || 2500,
|
||||
duration: 500,
|
||||
marTop: 50,
|
||||
searchH: 0,
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
hotWords: this.dataConfig.hotWords.list || [],
|
||||
tabClick: 0, //导航栏被点击
|
||||
isLeft: 0, //导航栏下划线位置
|
||||
isWidth: 0, //每个导航栏占位
|
||||
mainWidth: 0,
|
||||
tabLeft:0,
|
||||
swiperIndex:0,
|
||||
childIndex:0,
|
||||
childID:0,
|
||||
tabTitle:this.dataConfig.listConfig.list,
|
||||
fixedTop: 0,
|
||||
isTop: 0,
|
||||
navHeight: 38,
|
||||
homeTop: 20,
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
intervals: 3000,
|
||||
duration: 500,
|
||||
imgUrls: [], //图片轮播数据
|
||||
imageH: 310,
|
||||
swiperCur: 0,
|
||||
swiperType: 1,
|
||||
searchVal: this.dataConfig.hotWords && this.dataConfig.hotWords.list[0]['val'] || '',
|
||||
bgColor: this.dataConfig.swiperConfig.list && this.dataConfig.swiperConfig.list[0]['img'],
|
||||
tabId: false,
|
||||
isCategory: false,
|
||||
swiperTop: 0,
|
||||
isFixed: true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
imageH(nVal, oVal) {
|
||||
let self = this
|
||||
this.imageH = nVal
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var that = this
|
||||
// 获取设备宽度
|
||||
uni.getSystemInfo({
|
||||
success(e) {
|
||||
that.mainWidth = e.windowWidth
|
||||
that.isWidth = (e.windowWidth-65) / 8
|
||||
}
|
||||
})
|
||||
setTimeout((e) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.navTabBox').boundingClientRect(data => {
|
||||
// that.navHeight = data.height
|
||||
that.navHeight = data.height > 42 ? data.height : 42
|
||||
}).exec();
|
||||
// #ifdef H5
|
||||
query.select('.header').boundingClientRect(data => {
|
||||
that.isTop = data.height
|
||||
that.marTop = data.height
|
||||
}).exec();
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
// #ifdef APP-PLUS
|
||||
const menuButton = 0
|
||||
//#endif
|
||||
// #ifdef MP
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
//#endif
|
||||
query
|
||||
.select('.mp-header')
|
||||
.boundingClientRect(data => {
|
||||
this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
|
||||
this.marTop = data.height
|
||||
}).exec();
|
||||
//#endif
|
||||
}, 100)
|
||||
that.isTop = (uni.getSystemInfoSync().statusBarHeight + 43)
|
||||
that.imgUrls = that.dataConfig.swiperConfig.list
|
||||
that.$nextTick(function() {
|
||||
setTimeout((e) => {
|
||||
// #ifdef H5
|
||||
that.swiperTop = that.navHeight+that.marTop+(uni.getSystemInfoSync().statusBarHeight)
|
||||
//#endif
|
||||
// #ifdef MP
|
||||
that.swiperTop = that.navHeight+that.marTop
|
||||
// that.swiperTop = that.navHeight + that.marTop + 20
|
||||
//#endif
|
||||
// #ifdef APP-PLUS
|
||||
that.swiperTop = uni.getSystemInfoSync().statusBarHeight + 50 + 30
|
||||
//#endif
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
mounted(){
|
||||
let that = this;
|
||||
if(that.tabTitle[0]['value'] != '推荐'){
|
||||
that.tabTitle.unshift({
|
||||
img: '',
|
||||
info: [{value: "推荐"},{value: false}]
|
||||
})
|
||||
}
|
||||
that.$nextTick(function() {
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: function(res) {
|
||||
that.$set(that, 'imageH', res.height);
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', 310);
|
||||
// console.log(error, 'error')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goDetail(url){
|
||||
let urls = url.info[1].value
|
||||
if(urls.indexOf("http") != -1){
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
}else{
|
||||
if(['/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index','/pages/plant_grass/index'].indexOf(urls) == -1){
|
||||
uni.navigateTo({
|
||||
url:urls
|
||||
})
|
||||
}else{
|
||||
uni.switchTab({
|
||||
url:urls
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
swiperChange(e) {
|
||||
let { current, source } = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.swiperCur = e.detail.current;
|
||||
this.bgColor = this.imgUrls[e.detail.current]['img']
|
||||
}
|
||||
},
|
||||
textChange(e) {
|
||||
let { current, source } = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.searchVal = this.hotWords[e.detail.current]['val']
|
||||
}
|
||||
},
|
||||
/**显示全部分类*/
|
||||
showCategory() {
|
||||
this.isCategory = true;
|
||||
},
|
||||
/*跳转为页面*/
|
||||
changeTab(item, index) {
|
||||
if(this.tabClick == index) return
|
||||
this.tabClick = index //设置导航点击了哪一个
|
||||
this.isLeft = index * this.isWidth + 16 //设置下划线位置
|
||||
this.tabId = item.info[1].value
|
||||
this.bgColor = this.tabId ? item.img : this.dataConfig.swiperConfig.list[0]['img']
|
||||
this.imgUrls = this.tabId ? [{img:item.img}] : this.dataConfig.swiperConfig.list
|
||||
this.$emit('changeDiy', this.tabId);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page_count {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
z-index: 0;
|
||||
/* #endif */
|
||||
z-index: 0;
|
||||
filter: blur(0);
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(30rpx);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-main{
|
||||
transition: background-color .5s ease;
|
||||
}
|
||||
.swiperTxt {
|
||||
width: 300rpx;
|
||||
line-height: 64rpx;
|
||||
height: 64rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.swiperTxt .text {
|
||||
width: 480rpx;
|
||||
}
|
||||
.swiperTxt .text .newsTitle {
|
||||
width: 300rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
.header {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.btn {
|
||||
position: relative;
|
||||
margin-left: 30rpx;
|
||||
.iconfont {
|
||||
font-size: 45rpx;
|
||||
}
|
||||
}
|
||||
.iconnum {
|
||||
min-width: 14rpx;
|
||||
color: #E93323;
|
||||
background: #fff;
|
||||
border-radius: 15rpx;
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -10rpx;
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.serch-wrapper {
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx 20rpx 30rpx;
|
||||
.logo {
|
||||
width: 133rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
image {
|
||||
width: 133rpx;
|
||||
height: 66rpx;
|
||||
}
|
||||
.box{
|
||||
flex: 1;
|
||||
}
|
||||
.input,.uninput {
|
||||
line-height: 64rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 0 0 30rpx;
|
||||
background: rgba(0,0,0,.2);
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
color: #eeeeee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mp-header {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.box{
|
||||
flex: 1;
|
||||
}
|
||||
.serch-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 50rpx 0 30rpx;
|
||||
height: 76rpx;
|
||||
.logo {
|
||||
width: 133rpx;
|
||||
margin-right: 20rpx;
|
||||
line-height: 0;
|
||||
}
|
||||
image {
|
||||
width: 118rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
.input,.uninput {
|
||||
display: flex;
|
||||
/* #ifdef MP */
|
||||
flex: 0;
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
padding: 0 50rpx 0 30rpx;
|
||||
background: rgba(0,0,0,.2);
|
||||
border-radius: 100rpx;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
color: #eeeeee;
|
||||
}
|
||||
}
|
||||
/* #ifdef MP */
|
||||
.uninput{
|
||||
max-width: 500rpx;
|
||||
}
|
||||
.input{
|
||||
max-width: 340rpx;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
.tabNav {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.navTabBox {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
padding: 0 30rpx;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
&.isFixed {
|
||||
z-index: 30;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
scroll-view{
|
||||
width:100%;
|
||||
padding-right: 30rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
.click {
|
||||
color: white;
|
||||
}
|
||||
.longTab {
|
||||
.longItem{
|
||||
height: 50upx;
|
||||
display: inline-block;
|
||||
line-height: 50upx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
max-width: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
&.click{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
&::after{
|
||||
content: '';
|
||||
transition: .5s;
|
||||
width: 33rpx;
|
||||
height: 4rpx;
|
||||
background: #FFFFFF;
|
||||
position: absolute;
|
||||
bottom: -4rpx;
|
||||
left: 50%;
|
||||
margin-left: -16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrolled{
|
||||
z-index: 5000;
|
||||
position: fixed;
|
||||
min-height: 180rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: #fff!important;
|
||||
transition: background-color .5s ease;
|
||||
.longItem,.click,.category text{
|
||||
color: #000000!important;
|
||||
}
|
||||
.navTabBox,.mp-header{
|
||||
transition: background-color .5s ease;
|
||||
}
|
||||
.btn .iconfont{
|
||||
color: #333333!important;
|
||||
}
|
||||
.iconnum{
|
||||
background: #333333!important;
|
||||
}
|
||||
.underline{
|
||||
background: #000000!important;
|
||||
}
|
||||
.click{
|
||||
&::after{
|
||||
background-color:#fff!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiperBg {
|
||||
z-index: 1;
|
||||
margin-top: 10rpx;
|
||||
padding-bottom: 30rpx;
|
||||
.colorBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 130rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.page_swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
overflow-x: hidden;
|
||||
z-index: 8;
|
||||
padding: 0 10rpx;
|
||||
swiper-item{
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.swiper-item, image, .acea-row.row-between-wrapper {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
swiper{
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 308rpx;
|
||||
&.scalex{
|
||||
/deep/.uni-swiper-slide-frame{
|
||||
transform: translate(0,0)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
image {
|
||||
transform: scale(0.93);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
swiper-item.active, swiper-item.scalex{
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/*用来包裹所有的小圆点 */
|
||||
.dots {
|
||||
width: 156rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
left: 320rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
/*未选中时的小圆点样式 */
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 6rpx;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
width: 32rpx;
|
||||
height: 6rpx;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.dot0 .uni-swiper-dots-horizontal{
|
||||
left: 10%;
|
||||
}
|
||||
/deep/.dot1 .uni-swiper-dots-horizontal{
|
||||
left: 50%;
|
||||
}
|
||||
/deep/.dot2 .uni-swiper-dots-horizontal{
|
||||
left: 90%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
<template>
|
||||
<view v-if="rankingData" class="rank_card bg-white">
|
||||
<view class="cross">
|
||||
<view class="cross_rank_header acea-row row-between row-middle">
|
||||
<view class="rank_logo">
|
||||
<image class="title-img" :src="`${domain}/static/images/rank_title.png`" alt=""></image>
|
||||
</view>
|
||||
<navigator url="/pages/activity/rank/index" hover-class="none" class="session">更多 <text class="iconfont icon-jiantou" hover-class="none"></text></navigator>
|
||||
</view>
|
||||
<view class="scroll_box">
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; vertical-align: middle;"
|
||||
show-scrollbar="false">
|
||||
<view class="scroll_item" v-for="(item,idx) in rankingData" :key="idx" v-if="item.list.length > 0" :style="'border-radius:'+bgStyle+'rpx'">
|
||||
<view>
|
||||
<block v-if="item.list.length == 1">
|
||||
<navigator :url="'/pages/activity/rank/index?cate_id='+item.cate_id" hover-class="none" class="acea-row row-between">
|
||||
<view class="left_count" :style="'border-radius:'+conStyle+'rpx'">
|
||||
<view class="left_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[0]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">01</view>
|
||||
</view>
|
||||
<view class="cate_name">
|
||||
<text class="rank_tit line1">{{item.cate_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="acea-row row-column row-between">
|
||||
<view class="right_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[0]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">02</view>
|
||||
</view>
|
||||
<view class="right_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[0]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">03</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
<block v-if="item.list.length == 2">
|
||||
<navigator :url="'/pages/activity/rank/index?cate_id='+item.cate_id" hover-class="none" class="acea-row row-between">
|
||||
<view class="left_count" :style="'border-radius:'+conStyle+'rpx'">
|
||||
<view class="left_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[0]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">01</view>
|
||||
</view>
|
||||
<view class="cate_name">
|
||||
<text class="rank_tit line1">{{item.cate_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="acea-row row-column row-between">
|
||||
<view class="right_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[1]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">02</view>
|
||||
</view>
|
||||
<view class="right_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[1]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">03</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
<block v-if="item.list.length >= 3">
|
||||
<navigator :url="'/pages/activity/rank/index?cate_id='+item.cate_id" hover-class="none" class="acea-row row-between">
|
||||
<view class="left_count" :style="'border-radius:'+conStyle+'rpx'">
|
||||
<view class="left_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[0]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">01</view>
|
||||
</view>
|
||||
<view class="cate_name">
|
||||
<text class="rank_tit line1">{{item.cate_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="acea-row row-column row-between">
|
||||
<view class="right_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[1]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">02</view>
|
||||
</view>
|
||||
<view class="right_pic">
|
||||
<view class="picture" :class="'border'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.list[2]['image']"></easy-loadimage>
|
||||
</view>
|
||||
<view class="rank acea-row row-center row-middle">03</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import { hotRankingApi } from '@/api/activity.js'
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
|
||||
export default {
|
||||
name: 'hotRanking',
|
||||
components:{easyLoadimage},
|
||||
props:{
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
list: this.dataConfig.cateConfig.list,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 16 : 0,
|
||||
conStyle: this.dataConfig.conStyle.type ? 10 : 0,
|
||||
unique: this.dataConfig.timestamp,
|
||||
rankingData: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData: function() {
|
||||
let that = this;
|
||||
let data = {
|
||||
unique: that.unique,
|
||||
cate_pid: that.getCateId(),
|
||||
};
|
||||
hotRankingApi(data).then(res => {
|
||||
that.rankingData = res.data
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
//获取分类id
|
||||
getCateId(){
|
||||
let arr = []
|
||||
this.list.forEach((item, i) => {
|
||||
arr.push(item.cate)
|
||||
});
|
||||
return arr.toString()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cross_rank_header{
|
||||
padding: 30rpx 20rpx 0 40rpx;
|
||||
.icon-jiantou{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.rank_logo{
|
||||
position: relative;
|
||||
.title-img{
|
||||
width: 136rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
.session{
|
||||
font-size: 24rpx;
|
||||
color: #323232;
|
||||
text-align: right;
|
||||
}
|
||||
.scroll_box {
|
||||
width: 750rpx;
|
||||
margin-top: 24rpx;
|
||||
padding-left: 32rpx;
|
||||
}
|
||||
.scroll_item {
|
||||
display: inline-block;
|
||||
background-color: #FFFFFF;
|
||||
width: 414rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.scroll_item~.scroll_item {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.left_count{
|
||||
width: 230rpx;
|
||||
background: #FFF6F5;
|
||||
border-radius: 10rpx;;
|
||||
.cate_name{
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
.rank_tit{
|
||||
padding: 0 35rpx;
|
||||
color: #E93323;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
max-width: 230rpx;
|
||||
display: inline-block;
|
||||
&::before,&::after{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 22rpx;
|
||||
height: 30rpx;
|
||||
background-image: url('../../activity/static/images/rank_cate.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
}
|
||||
&::before{
|
||||
left: 0;
|
||||
}
|
||||
&::after{
|
||||
right: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left_pic{
|
||||
width: 230rpx;
|
||||
height: 230rpx;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.picture,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 200rpx!important;
|
||||
height: 200rpx!important;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.border0{
|
||||
border-radius: 0;
|
||||
/deep/image,/deep/.easy-loadimage,/deep/uni-image{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.border10{
|
||||
border-radius: 10rpx;
|
||||
/deep/image,/deep/.easy-loadimage,/deep/uni-image{
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.rank {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10rpx;
|
||||
width: 50rpx;
|
||||
height: 61rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #CE8F21;;
|
||||
background-image: url('../../activity/static/images/rank.png');
|
||||
background-size: cover;
|
||||
font-family: '黑体';
|
||||
}
|
||||
}
|
||||
.right_pic{
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
&:first-child{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.picture,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 124rpx!important;
|
||||
height: 124rpx!important;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.rank {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 6rpx;
|
||||
width: 30rpx;
|
||||
height: 36rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: bold;
|
||||
color: #CE8F21;;
|
||||
background-image: url('../../activity/static/images/rank.png');
|
||||
background-size: cover;
|
||||
font-family: '黑体';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
const path = require('path')
|
||||
const files = require.context('./', false, /\.vue$/)
|
||||
const modules = {}
|
||||
files.keys().forEach(key => {
|
||||
const name = path.basename(key, '.vue')
|
||||
modules[name] = files(key).default || files(key)
|
||||
})
|
||||
export default modules
|
||||
|
|
@ -0,0 +1,561 @@
|
|||
<template>
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="liveList.length > 0" style="margin: 0 20rpx;">
|
||||
<view class="wrapper-count" :style="[{'margin-top': mbConfig + 'rpx'},{'background':bg},{'border-radius':bgStyle+'rpx'}]">
|
||||
<view class="spike-bd">
|
||||
<view class="title line1"><image class="title-img" :src="`${domain}/static/images/broadcast_title.png`"></image></view>
|
||||
<navigator v-if="!merId" url="/pages/activity/liveBroadcast/index" class="more-btn" hover-class="none">
|
||||
进入频道
|
||||
<text class="iconfont icon-jiantou" hover-class="none"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<!-- 直播 -->
|
||||
<block v-if="listStyle == 0">
|
||||
<view class="live-wrapper mores">
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex">
|
||||
<view class="item" v-for="(item, index) in liveList" :key="index">
|
||||
<navigator hover-class="none" :url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id">
|
||||
<view
|
||||
class="live-top"
|
||||
:style="'background:' + (item.live_status == 101 ? playBg : item.live_status != 101 && item.live_status != 102 ? endBg : notBg) + ';'"
|
||||
:class="item.live_status == 102 ? 'playRadius' : 'notPlayRadius'"
|
||||
>
|
||||
<view v-if="item.live_status == 101">
|
||||
<image :src="`${domain}/static/images/live-01.png`" mode=""></image>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view v-if="item.live_status == 103 && item.replay_status === 1">
|
||||
<image :src="`${domain}/static/images/live-02.png`" mode=""></image>
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<view v-if="(item.live_status != 101 && item.live_status != 102 && item.live_status != 103) || (item.live_status == 103 && item.replay_status == 0)">
|
||||
<image :src="`${domain}/static/images/live-02.png`" mode=""></image>
|
||||
<text>已结束</text>
|
||||
</view>
|
||||
<view v-if="item.live_status == 102">
|
||||
<image :src="`${domain}/static/images/live-03.png`" mode=""></image>
|
||||
<text>预告</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.live_status == 101 || item.live_status == 102" class="broadcast-time">{{ item.show_time }}</view>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.share_img"></easy-loadimage>
|
||||
</navigator>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="listStyle == 1">
|
||||
<view class="live-wrapper-a">
|
||||
<navigator class="live-item-a" v-for="(item,index) in liveList" :key="index" :url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id" hover-class="none">
|
||||
<view class="img-box">
|
||||
<view class="label bgblue" v-if="item.live_status == 102">
|
||||
<view class="txt">预告</view>
|
||||
<view class="msg">{{item.show_time}}</view>
|
||||
</view>
|
||||
<view class="label bggary" v-if="item.live_status==103 && item.replay_status === 1">
|
||||
<image :src="`${domain}/static/images/live-02.png`" mode="" style="width: 20rpx; height: 20rpx;"></image>
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<view class="label bgred" v-if="item.live_status==101">
|
||||
<image :src="`${domain}/static/images/live-01.png`" mode="" style="width: 21rpx; height: 22rpx;"></image>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view class="label bggary" v-if="(item.live_status != 101 && item.live_status != 102 && item.live_status != 103) || (item.live_status == 103 && item.replay_status == 0)">
|
||||
<image :src="`${domain}/static/images/live-02.png`" mode=""></image>
|
||||
<text>已结束</text>
|
||||
</view>
|
||||
<image :src="item.share_img"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title line2">{{item.name}}</view>
|
||||
<view class="people">
|
||||
<text>{{item.anchor_name}}</text>
|
||||
</view>
|
||||
<view class="goods-wrapper">
|
||||
<block v-if="item.broadcast.length<=3 && item.broadcast.length > 0">
|
||||
<view class="goods-item" v-for="(goods,index) in item.broadcast" :key="index">
|
||||
<image :src="goods.goods.cover_img" alt="">
|
||||
<text class="line1">￥{{goods.goods.price}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if=" item.broadcast.length>3">
|
||||
<view class="goods-item" v-for="(goods,index) in item.broadcast" :key="index" v-if="index<2">
|
||||
<image :src="goods.goods.cover_img" alt="">
|
||||
<text class="line1">￥{{goods.goods.price}}</text>
|
||||
</view>
|
||||
<view class="goods-item">
|
||||
<image :src="item.broadcast[item.broadcast.length-1].goods.cover_img" alt="">
|
||||
<view class="num">+{{item.broadcast.length}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="item.broadcast.length == 0">
|
||||
<view class="empty-goods" >暂无商品</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="listStyle == 2">
|
||||
<view class="live-wrapper-b">
|
||||
<navigator class="live-item-b" v-for="(item,index) in liveList" :key="index" :url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id" hover-class="none" :style="[{'box-shadow':`0px 1px 20px ${boxShadow}`}]">
|
||||
<view class="img-box">
|
||||
<view class="label bgblue" v-if="item.live_status == 102">
|
||||
<view class="txt">预告</view>
|
||||
<view class="msg">{{item.show_time}}</view>
|
||||
</view>
|
||||
<view class="label bggary" v-if="item.live_status==103 && item.replay_status === 1">
|
||||
<image :src="`${domain}/static/images/live-02.png`" mode="" style="width: 20rpx; height: 20rpx;"></image>
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<view class="label bgred" v-if="item.live_status==101">
|
||||
<image :src="`${domain}/static/images/live-01.png`" mode="" style="width: 21rpx; height: 22rpx;"></image>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view class="label bggary" v-if="(item.live_status != 101 && item.live_status != 102 && item.live_status != 103) || (item.live_status == 103 && item.replay_status == 0)">
|
||||
<image :src="`${domain}/static/images/live-02.png`" mode=""></image>
|
||||
<text>已结束</text>
|
||||
</view>
|
||||
<image :src="item.share_img"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title line2">{{item.name}}</view>
|
||||
<view class="people">
|
||||
<text>{{item.anchor_name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import {getLiveList} from '@/api/store.js';
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
export default {
|
||||
name: 'liveBroadcast',
|
||||
components: {
|
||||
easyLoadimage
|
||||
},
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
listStyle: this.dataConfig.listStyle.type,
|
||||
bgStyle: this.dataConfig.bgStyle && this.dataConfig.bgStyle.type ? '16' : '0',
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
liveList: [],
|
||||
bg:this.dataConfig.bg.color[0].item,
|
||||
endBg: 'linear-gradient(#666666, #999999)',
|
||||
notBg: 'rgb(26, 163, 246)',
|
||||
playBg: 'linear-gradient(#FF0000, #FF5400)',
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getLiveList();
|
||||
},
|
||||
methods: {
|
||||
// 直播
|
||||
getLiveList() {
|
||||
let that = this;
|
||||
getLiveList({
|
||||
mer_id: that.merId,
|
||||
limit: 10
|
||||
}).then(res => {
|
||||
that.liveList = res.data.list;
|
||||
that.liveList.forEach(val => {
|
||||
val.link =
|
||||
(val.live_status == 103 && val.replay_status) || val.live_status === 101 || val.live_status === 102
|
||||
? 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + val.room_id
|
||||
: '';
|
||||
});
|
||||
})
|
||||
.catch(e => {});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/main.scss';
|
||||
.wrapper-count{
|
||||
padding: 24rpx 20rpx 0;
|
||||
}
|
||||
.live-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 16rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
.live-top {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.broadcast-time {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
left: 100rpx;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 160rpx;
|
||||
height: 36rpx;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
font-size: 22rpx;
|
||||
border-radius: 0 0 18rpx 0;
|
||||
}
|
||||
.live-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 6rpx;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
&.mores {
|
||||
width: 100%;
|
||||
.item {
|
||||
position: relative;
|
||||
width: 280rpx;
|
||||
display: inline-block;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
/deep/image,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 280rpx;
|
||||
height: 224rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.live-title {
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.live-top {
|
||||
width: 110rpx;
|
||||
height: 32rpx;
|
||||
font-size: 22rpx;
|
||||
image {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.live-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 16rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
.live-top {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 180rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 16rpx 0px 16rpx 0px;
|
||||
&.playRadius {
|
||||
border-radius: 16rpx 0 0 0;
|
||||
}
|
||||
&.notPlayRadius {
|
||||
border-radius: 16rpx 0px 16rpx 0px;
|
||||
}
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
/* #ifdef H5 */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
.live-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 6rpx;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
&.mores {
|
||||
width: 100%;
|
||||
.item {
|
||||
position: relative;
|
||||
width: 280rpx;
|
||||
display: inline-block;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
image {
|
||||
width: 280rpx;
|
||||
height: 224rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.live-title {
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.live-top {
|
||||
width: 100rpx;
|
||||
height: 36rpx;
|
||||
font-size: 22rpx;
|
||||
image {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.live-wrapper-a{
|
||||
padding: 0rpx 20rpx 0;
|
||||
.live-item-a{
|
||||
display: flex;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.img-box{
|
||||
position: relative;
|
||||
width: 340rpx;
|
||||
height: 270rpx;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx 20rpx;
|
||||
.title{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.people{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.goods-wrapper{
|
||||
display: flex;
|
||||
.goods-item{
|
||||
position: relative;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin-right: 20rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 16rpx;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
text{
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
line-height: 70rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
|
||||
}
|
||||
.num{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty-goods{
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #B2B2B2;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.live-wrapper-c{
|
||||
.live-item-a{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.img-box{
|
||||
width: 100%;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: initial;
|
||||
.left{
|
||||
width: 69%;
|
||||
}
|
||||
.goods-wrapper{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.live-wrapper-b{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.live-item-b{
|
||||
width: 328rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
.img-box{
|
||||
position: relative;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 274rpx;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
.title{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.people{
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 16rpx 0px 16rpx 0;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
image{
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
text{
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.bgred{
|
||||
width: 132rpx;
|
||||
height: 38rpx;
|
||||
background: linear-gradient(270deg, #F5742F 0%, #FF1717 100%)
|
||||
}
|
||||
.bggary{
|
||||
width: 108rpx;
|
||||
height: 38rpx;
|
||||
background: linear-gradient(270deg, #999999 0%, #666666 100%)
|
||||
}
|
||||
.bgblue{
|
||||
width: 220rpx;
|
||||
height: 38rpx;
|
||||
background: rgba(0,0,0,0.36);
|
||||
overflow: hidden;
|
||||
.txt{
|
||||
position: relative;
|
||||
left: -6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: linear-gradient(270deg, #2FA1F5 0%, #0076FF 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<view class='nav acea-row acea-row' :style="'background:'+bgColor[0].item+';margin:' +mbConfig+'rpx '+prConfig+'rpx 0;border-radius:'+bgStyle+'rpx;'" v-if="menus.length">
|
||||
<block v-if="rowStyle == 0">
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
|
||||
<view v-for="(item,index) in menus" :key="index" class='item' :style="'color:'+titleColor" @click="menusTap(item.info[1].value)">
|
||||
<view class='pictrue skeleton-rect'>
|
||||
<image :src='item.img' :style="'border-radius:'+menuStyle"></image>
|
||||
</view>
|
||||
<view class="menu-txt" :style="'color:'+titleColor">{{item.info[0].value}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block v-else v-for="(item,index) in menus" :key="index">
|
||||
<view class='item' :style="'color:'+titleColor+';width:'+number" @click="menusTap(item.info[1].value)">
|
||||
<view class='pictrue skeleton-rect'>
|
||||
<image :src='item.img' :style="'border-radius:'+menuStyle"></image>
|
||||
</view>
|
||||
<view class="menu-txt" :style="'color:'+titleColor">{{item.info[0].value}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {merPath} from "@/utils/index"
|
||||
export default {
|
||||
name: 'menus',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: this.dataConfig.menuConfig.list,
|
||||
bgColor: this.dataConfig.bgColor.color,
|
||||
menuStyle: this.dataConfig.menuStyle.type ? '50%' : 0,
|
||||
rowStyle: this.dataConfig.tabConfig.tabVal, //0单行1多行
|
||||
bgStyle: this.dataConfig.bgStyle.type ? '16' : '0',
|
||||
titleColor: this.dataConfig.titleColor.color[0].item,
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
prConfig: this.dataConfig.prConfig.val*2,
|
||||
rowNum: this.dataConfig.rowsNum.type,//0两行，1三行，2四行
|
||||
number: this.dataConfig.number.type == 0 ? '33.33%' : this.dataConfig.number.type == 1 ? '25%' : '20%', //三个四个五个
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
menusTap(url) {
|
||||
let data = this.$util.stringIntercept(url, 1, '\?');
|
||||
data = this.$util.stringIntercept(data, 1, '\=');
|
||||
uni.setStorageSync('storeIndex', data);
|
||||
url = merPath(url, this.merId)
|
||||
if(url.indexOf("http") != -1){
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
}else{
|
||||
if(['/pages/goods_cate/goods_cate','/pages/plant_grass/index','/pages/order_addcart/order_addcart','/pages/user/index'].indexOf(url) == -1){
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}else{
|
||||
uni.switchTab({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav {
|
||||
padding: 30rpx 0 0;
|
||||
.item {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
margin-bottom: 20rpx;
|
||||
.pictrue,/deep/.pictrue image,/deep/.pictrue .easy-loadimage,/deep/.pictrue uni-image {
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.menu-txt {
|
||||
font-size: 24rpx;
|
||||
color: #454545;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
&.four {
|
||||
width: 25%;
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<view v-if="itemNew.length" :style="'margin-top:'+mbConfig+'rpx;'">
|
||||
<view class='news acea-row row-between-wrapper':style="'background:'+bgColor[0].item+';margin: 0 '+prConfig+'rpx;border-radius:'+bgStyle+'rpx'">
|
||||
<view class='pictrue'>
|
||||
<image :src='logoConfig'></image>
|
||||
</view>
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration" vertical="true"
|
||||
circular="true">
|
||||
<block v-for="(item,index) in itemNew" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view @click="goDetail(item.chiild[1].val)" class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1' :style="'text-align:'+ (txtStyle==1?'center':txtStyle==2?'right':'left') +';color:'+txtColor">{{item.chiild[0].val}}</view>
|
||||
</view>
|
||||
<text class='iconfont icon-jiantou' style="color:#282828;"></text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {merPath} from "@/utils/index"
|
||||
export default {
|
||||
name: 'news',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
autoplay: true,
|
||||
duration: 500,
|
||||
itemNew: this.dataConfig.listConfig.list,
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
bgColor: this.dataConfig.bgColor.color,
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
prConfig: this.dataConfig.prConfig.val*2,
|
||||
txtStyle: this.dataConfig.txtStyle.type,
|
||||
txtColor: this.dataConfig.txtColor.color[0].item,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
goDetail(url){
|
||||
let urls = merPath(url, this.merId)
|
||||
// console.log(urls,'urls');
|
||||
if(urls.indexOf("http") != -1){
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
}else{
|
||||
if(['/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index','/pages/plant_grass/index'].indexOf(urls) == -1){
|
||||
uni.navigateTo({
|
||||
url:urls
|
||||
})
|
||||
}else{
|
||||
uni.switchTab({
|
||||
url:urls
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news {
|
||||
height: 77rpx;
|
||||
border-top: 1px solid #f4f4f4;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0 10rpx 30rpx #f5f5f5;
|
||||
}
|
||||
.news .pictrue {
|
||||
width: 130rpx;
|
||||
height: 36rpx;
|
||||
border-right: 1px solid #ddd;
|
||||
padding-right: 23rpx;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.news .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.news .swiperTxt {
|
||||
width: 510rpx;
|
||||
height: 100%;
|
||||
line-height: 77rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.news .swiperTxt .text {
|
||||
width: 480rpx;
|
||||
}
|
||||
.news .swiperTxt .text .label {
|
||||
font-size: 20rpx;
|
||||
color: #ff4c48;
|
||||
width: 64rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
border: 2rpx solid #ff4947;
|
||||
}
|
||||
.news .swiperTxt .text .newsTitle {
|
||||
width: 397rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.news .swiperTxt .icon-jiantou {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.news .swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,303 @@
|
|||
<template>
|
||||
<view class="pictureCube skeleton-rect" :class="{pageOn:bgStyle===1}" :style="{margin:'0 '+prConfig*2+'rpx',marginTop:slider*2+'rpx',background:bgColor}" v-if="picList.length" v-show="!isSortType">
|
||||
<view class="advertItem01" v-for="(item,index) in picList" :key="index" v-if="style==0" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="advertItem02 acea-row" v-if="style==1">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" :style="'height:'+ imageH +'rpx;'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem03 acea-row" v-if="style==2">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem04 acea-row" v-if="style==3">
|
||||
<view class="item" @click="goDetail(picList[0])">
|
||||
<image :src="picList[0].image"></image>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="pic" @click="goDetail(picList[1])">
|
||||
<image :src="picList[1].image"></image>
|
||||
</view>
|
||||
<view class="pic" @click="goDetail(picList[2])">
|
||||
<image :src="picList[2].image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem05 acea-row" v-if="style==4">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFit" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem06 acea-row" v-if="style==5">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {merPath} from "@/utils/index"
|
||||
|
||||
export default {
|
||||
name: 'pictureCube',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
picList: this.dataConfig.picStyle.picList,
|
||||
style: this.dataConfig.tabConfig.tabVal,
|
||||
bgStyle: this.dataConfig.bgStyle.type,
|
||||
prConfig: this.dataConfig.prConfig.val,
|
||||
slider: this.dataConfig.mbConfig.val,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
widthC: '',
|
||||
imageH: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if(this.picList.length){
|
||||
let that = this;
|
||||
this.$nextTick((e) => {
|
||||
if(this.style==1){
|
||||
this.widthC = 375
|
||||
}else if(this.style==2){
|
||||
this.widthC = 250
|
||||
}else if(this.style==4){
|
||||
this.widthC = 188
|
||||
}
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.picList[0].image),
|
||||
success: (res) => {
|
||||
if (res && res.height > 0) {
|
||||
let height = res.height * ((that.widthC-that.prConfig*2) / res.width)
|
||||
that.$set(that, 'imageH', height);
|
||||
} else {
|
||||
that.$set(that, 'imageH', (that.widthC-that.prConfig*2)*2);
|
||||
}
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', (that.widthC-that.prConfig*2)*2);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
goDetail(url) {
|
||||
let urls = url.link
|
||||
urls = merPath(urls, this.merId)
|
||||
if (urls.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${urls}`
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/plant_grass/index', '/pages/order_addcart/order_addcart', '/pages/user/index']
|
||||
.indexOf(urls) == -1) {
|
||||
uni.navigateTo({
|
||||
url: urls
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: urls
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pageOn{
|
||||
border-radius:24rpx!important;
|
||||
.advertItem01{
|
||||
image{
|
||||
border-radius:20rpx;
|
||||
}
|
||||
}
|
||||
.advertItem02{
|
||||
.item{
|
||||
&:nth-child(1){
|
||||
image{
|
||||
border-radius:20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
image{
|
||||
border-radius:0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.advertItem03{
|
||||
.item{
|
||||
&:nth-child(1){
|
||||
image{
|
||||
border-radius:20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
image{
|
||||
border-radius:0
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
image{
|
||||
border-radius:0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.advertItem04{
|
||||
.item{
|
||||
&:nth-child(1){
|
||||
image{
|
||||
border-radius:20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
.pic{
|
||||
&:nth-child(1){
|
||||
image{
|
||||
border-radius:0 20rpx 0 0
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
image{
|
||||
border-radius:0 0 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.advertItem05{
|
||||
.item{
|
||||
&:nth-child(1){
|
||||
image{
|
||||
border-radius:20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
image{
|
||||
border-radius:0
|
||||
}
|
||||
}
|
||||
&:nth-child(4){
|
||||
image{
|
||||
border-radius:0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.advertItem06{
|
||||
.item{
|
||||
&:nth-child(1){
|
||||
image{
|
||||
border-radius:20rpx 0 0 0
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
image{
|
||||
border-radius:0 20rpx 0 0
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
image{
|
||||
border-radius:0 0 0 20rpx
|
||||
}
|
||||
}
|
||||
&:nth-child(4){
|
||||
image{
|
||||
border-radius:0 0 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pictureCube {
|
||||
background-color: #fff;
|
||||
.advertItem01 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.advertItem02{
|
||||
width: 100%;
|
||||
.item{
|
||||
width: 50%;
|
||||
height: auto;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.advertItem03{
|
||||
.item{
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
.advertItem04{
|
||||
width: 100%;
|
||||
.item{
|
||||
width: 50%;
|
||||
height: 376rpx;
|
||||
.pic{
|
||||
width: 100%;
|
||||
height: 188rpx;
|
||||
}
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.advertItem05{
|
||||
.item{
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.advertItem06{
|
||||
.item{
|
||||
width: 50%;
|
||||
height: 188rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<view v-if="plantList.length > 0" :style="'margin-top:'+mbConfig+'rpx;'">
|
||||
<view class="plant-count skeleton-rect" :style="'margin: 0 '+prConfig+'rpx;border-radius:'+bgStyle+'rpx'">
|
||||
<block v-if="community_status">
|
||||
<view class="spike-bd plant_bg" :style="{ 'background-image': `url(${domain}/static/images/plant_bg.png)`}">
|
||||
<view class="title line1"><image class="title-img" :src="`${domain}/static/images/plant_title.png`"></image></view>
|
||||
<navigator v-if="!merId" :open-type="open_grass ? 'switchTab' : 'navigate'" url="/pages/plant_grass/index" class="more-btn" hover-class="none">
|
||||
好物分享
|
||||
<text class="iconfont icon-jiantou" hover-class="none"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="live-wrapper plant" style="border-radius: 0;">
|
||||
<scroll-view :class="'colum'+styleType" :scroll-x="styleType == 0 ? true : false" >
|
||||
<view
|
||||
v-for="(item, index) in plantList"
|
||||
:key="index"
|
||||
class="item"
|
||||
:class="'plant-item'+styleType"
|
||||
:style="'border-radius:'+conStyle+'rpx'"
|
||||
@click="goDetail(item)"
|
||||
>
|
||||
<view :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image[0]"></easy-loadimage>
|
||||
<view class="item_text">
|
||||
<text v-if="titleShow" class="text_name line1">{{item.title}}</text>
|
||||
<view v-if="avatarShow || nicknameShow" class="text_count acea-row">
|
||||
<image v-if="avatarShow" :src="(item.author && item.author.avatar) || '/static/images/f.png'" ></image>
|
||||
<text v-if="nicknameShow" class="name line1">{{(item.author && item.author.nickname) || ''}}</text>
|
||||
</view>
|
||||
<view class="like_count" v-if="styleType == 1">
|
||||
<text class="iconfont" :class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
|
||||
<text class="collect">{{item.count_start}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
import { graphicLstApi } from '@/api/community.js';
|
||||
import { openPlantGrass } from "@/config/app.js";
|
||||
import { mapGetters } from 'vuex';
|
||||
import { configMap } from '@/utils';
|
||||
export default {
|
||||
computed: configMap(['community_status']),
|
||||
components:{
|
||||
easyLoadimage
|
||||
},
|
||||
name: 'plantList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
plantList: [],
|
||||
open_grass: openPlantGrass,
|
||||
mbConfig: this.dataConfig.mbConfig.val*2, //页面间距
|
||||
styleType: this.dataConfig.tabConfig.tabVal, //单行，多行，板块
|
||||
prConfig: this.dataConfig.prConfig.val*2, //背景间距
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 16 : 0,
|
||||
conStyle: this.dataConfig.conStyle.type ? 16 : 0,
|
||||
titleShow: this.dataConfig.titleShow.val,
|
||||
avatarShow: this.dataConfig.avatarShow.val,
|
||||
nicknameShow: this.dataConfig.nicknameShow.val,
|
||||
domain: HTTP_REQUEST_URL,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getPlantList()
|
||||
},
|
||||
methods: {
|
||||
// 种草
|
||||
getPlantList(){
|
||||
let that = this;
|
||||
graphicLstApi({
|
||||
mer_id: that.merId,
|
||||
limit: 6
|
||||
}).then(res => {
|
||||
that.plantList = res.data.list;
|
||||
}).catch(e => {});
|
||||
},
|
||||
goDetail(item){
|
||||
if(item.is_type == 1){
|
||||
uni.navigateTo({
|
||||
url: '/pages/plantGrass/plant_detail/index?id='+item.community_id
|
||||
});
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
//#ifdef APP
|
||||
url: '/pages/short_video/appSwiper/index?id='+item.community_id
|
||||
//#endif
|
||||
//#ifndef APP
|
||||
url: '/pages/short_video/nvueSwiper/index?id='+item.community_id
|
||||
//#endif
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../style/main.scss';
|
||||
.plant-count{
|
||||
background: #ffffff;
|
||||
box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.plant_bg{
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
padding: 24rpx 20rpx 27rpx 30rpx;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.more-btn{
|
||||
top: 22rpx;
|
||||
}
|
||||
}
|
||||
.live-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 20rpx 0;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
.item{
|
||||
position: relative;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
/deep/image,.easy-loadimage,uni-image {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
.img-box16{
|
||||
/deep/image,.easy-loadimage,uni-image {
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
.img-box0{
|
||||
/deep/image,.easy-loadimage,uni-image {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.item_text{
|
||||
width: 260rpx;
|
||||
padding: 17rpx 15rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #ffffff;
|
||||
z-index: 9;
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.text_name{
|
||||
font-size: 24rpx;
|
||||
width: 260rpx;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
}
|
||||
.text_count{
|
||||
margin-top: 12rpx;
|
||||
align-items: center;
|
||||
.name{
|
||||
font-size: 18rpx;
|
||||
margin-left: 10rpx;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.plant-item1{
|
||||
width: 324rpx;
|
||||
height: 440rpx;
|
||||
margin-bottom: 20rpx;
|
||||
&:nth-child(2n){
|
||||
margin-right: 0;
|
||||
}
|
||||
/deep/image,.easy-loadimage,uni-image {
|
||||
width: 324rpx;
|
||||
height: 334rpx;
|
||||
}
|
||||
&::before{
|
||||
width: 324rpx;
|
||||
height: 334rpx;
|
||||
}
|
||||
.item_text{
|
||||
position: static;
|
||||
color: #282828;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
.text_name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text_count{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name{
|
||||
max-width: 160rpx;
|
||||
}
|
||||
}
|
||||
.like_count{
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.iconfont{
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
.icon-shoucang1{
|
||||
color: #E93323;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<view v-if="presellList.length > 0" class="presell-wrapper" :style="'margin-top:'+mbConfig+'rpx;'">
|
||||
<view class="presell-count" :class="'wrapper-count'+styleType" :style="'border-radius:'+bgStyle+'rpx'">
|
||||
<view class="spike-bd title-bd" :style="'border-radius:'+bgStyle+'rpx '+bgStyle+'rpx 0 0;background-image:url('+domain+'/static/images/presell_bg.png)'">
|
||||
<view class="title line1"><image class="title-img" :src="`${domain}/static/images/presell_title.png`"></image></view>
|
||||
<navigator v-if="!merId" url="/pages/activity/presell/index" class="more-btn" hover-class="none">
|
||||
进去逛逛
|
||||
<text class="iconfont icon-jiantou" hover-class="none"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="wapper_count">
|
||||
<view class="spike-wrapper" :class="'wrapper'+styleType">
|
||||
<scroll-view v-if="styleType != 2" :class="'colum'+styleType" :scroll-x="styleType == 0 ? true : false" show-scrollbar="false">
|
||||
<navigator
|
||||
class="spike-item presell-item"
|
||||
v-for="(item, index) in presellList"
|
||||
:key="index"
|
||||
:url="'/pages/activity/presell_details/index?id=' + item.product_presell_id"
|
||||
hover-class="none"
|
||||
>
|
||||
<view class="img-box presell_imgBox" :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.product.image"></easy-loadimage>
|
||||
<view v-if="presellShow" class="box_bg" :style="{ 'background-image': `url(${domain}/static/images/combination4.png);`}">火热预定中</view>
|
||||
</view>
|
||||
<view v-if="priceShow || titleShow" class="info">
|
||||
<view class="price-box presell-price">
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>预售价:￥</text>
|
||||
{{ item.price }}
|
||||
</text>
|
||||
<view v-if="titleShow" class="name line1">{{ item.store_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</scroll-view>
|
||||
<block v-else class="acea-row row-between-wrapper combination">
|
||||
<navigator
|
||||
class="combination-item"
|
||||
v-for="(item, index) in presellList"
|
||||
:key="index"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination${index+1}.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/presell_details/index?id=' + item.product_presell_id"
|
||||
hover-class="none">
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ item.product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ item.price }}
|
||||
</text>
|
||||
<text v-if="presellShow" class="gocom_btn">
|
||||
去预定
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="presellList.length == 1"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination2.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/presell_details/index?id=' + presellList[0].product_presell_id"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ presellList[0].product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ presellList[0].price }}
|
||||
</text>
|
||||
<text v-if="presellShow" class="gocom_btn">
|
||||
去预定
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="presellList[0].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="presellList.length == 1"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/presell_details/index?id=' + presellList[0].product_presell_id"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ presellList[0].product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ presellList[0].price }}
|
||||
</text>
|
||||
<text v-if="presellShow" class="gocom_btn">
|
||||
去预定
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="presellList[0].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="presellList.length == 2"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/presell_details/index?id=' + presellList[1].product_presell_id"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ presellList[1].product.store_name }}</view>
|
||||
<text :style="'color:'+themeColor" v-if="priceShow" class="price">
|
||||
<text>￥</text>
|
||||
{{ presellList[1].price }}
|
||||
</text>
|
||||
<text v-if="presellShow" class="gocom_btn">
|
||||
去预定
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="presellList[1].product.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
import { getPresellList } from '@/api/activity.js';
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
export default {
|
||||
components:{
|
||||
easyLoadimage
|
||||
},
|
||||
name: 'presellList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
presellList: [],
|
||||
mbConfig: this.dataConfig.mbConfig.val*2, //页面间距
|
||||
styleType: this.dataConfig.tabConfig.tabVal, //单行，多行，板块
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
|
||||
conStyle: this.dataConfig.conStyle.type ? 16 : 0,
|
||||
titleShow: this.dataConfig.titleShow.val,
|
||||
priceShow: this.dataConfig.priceShow.val,
|
||||
themeColor: this.dataConfig.themeColor && this.dataConfig.themeColor.color[0].item,
|
||||
presellShow: this.dataConfig.presellShow.val
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getPresellProduct()
|
||||
},
|
||||
methods: {
|
||||
// 预售
|
||||
getPresellProduct() {
|
||||
let that = this;
|
||||
getPresellList({
|
||||
mer_id: that.merId,
|
||||
limit: that.styleType == 2 ? 3 : 12
|
||||
}).then(res => {
|
||||
that.presellList = res.data.list;
|
||||
}).catch(e => {});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../style/main.scss';
|
||||
.presell-wrapper{
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.spike-wrapper {
|
||||
&.wrapper2{
|
||||
padding: 0 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
.presell-count {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.title-bd {
|
||||
margin-bottom: 0;
|
||||
padding: 24rpx 30rpx 30rpx 30rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
.more-btn {
|
||||
top: 23rpx;
|
||||
}
|
||||
}
|
||||
.wapper_count {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.wrapper-count2{
|
||||
.wapper_count{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<view class="index-product-wrapper" :class="iSshowH?'on':''" :style="'margin-top:'+mbConfig+'rpx;'">
|
||||
<view class="nav-bd">
|
||||
<view class="item" v-for="(item,index) in explosiveMoney" :index="index" :class="{active:index == ProductNavindex}"
|
||||
@click="ProductNavTab(item.link.activeVal,index)">
|
||||
<view class="txt">{{item.chiild[0].val}}</view>
|
||||
<view class="label">{{item.chiild[1].val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 首发新品 -->
|
||||
<view class="list-box animated" :class='tempArr.length > 0?"fadeIn on":""'>
|
||||
<view class="item" v-for="(item,index) in tempArr" :key="index" @click="goDetail(item)">
|
||||
<view class="pictrue">
|
||||
<span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '1'">秒杀</span>
|
||||
<span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '2'">砍价</span>
|
||||
<span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '3'">拼团</span>
|
||||
<image :src="item.image" mode=""></image>
|
||||
</view>
|
||||
<view class="text-info">
|
||||
<view class="title line1">{{item.store_name}}</view>
|
||||
<view class="old-price"><text>¥</text>{{item.ot_price}}</view>
|
||||
<view class="price" :style="'color:'+themeColor+';'">
|
||||
<text>￥</text>{{item.price}}
|
||||
<view class="txt" :style="'border-color:'+themeColor+';'" v-if="item.checkCoupon">券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'promotionList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
tempArr: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
iSshowH: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ProductNavindex: 0,
|
||||
explosiveMoney: this.dataConfig.tabConfig.list,
|
||||
numConfig: this.dataConfig.numConfig.val,
|
||||
// imgStyle: this.dataConfig.imgStyle.type,
|
||||
mbConfig: this.dataConfig.mbConfig.val * 2,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 首发新品切换
|
||||
ProductNavTab(type, index) {
|
||||
this.ProductNavindex = index;
|
||||
this.$emit('changeTab', type);
|
||||
},
|
||||
goDetail(item){
|
||||
this.$emit('detail',item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index-product-wrapper {
|
||||
margin: 30rpx 20rpx 0 20rpx;
|
||||
&.on {
|
||||
min-height: 1500rpx;
|
||||
}
|
||||
.nav-bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.on{
|
||||
border-radius: 0;
|
||||
}
|
||||
.txt {
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 124rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 5rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
&.active {
|
||||
color: $theme-color;
|
||||
.label {
|
||||
background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
|
||||
border-radius: 16rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
.item {
|
||||
width: 345rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.pictrue_log {
|
||||
width: 92rpx;
|
||||
height: 44rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 346rpx;
|
||||
display: block;
|
||||
}
|
||||
.text-info {
|
||||
padding: 10rpx 20rpx 15rpx;
|
||||
.title {
|
||||
color: #222222;
|
||||
}
|
||||
.old-price {
|
||||
margin-top: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #AAAAAA;
|
||||
text-decoration: line-through;
|
||||
text {
|
||||
margin-right: 2px;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: $theme-color;
|
||||
font-size: 36rpx;
|
||||
font-weight: 550;
|
||||
text {
|
||||
padding-bottom: 4rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border: 1px solid $theme-color;
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.on {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<view class='richText' :style="'background-color:'+bgColor+';margin:'+ udConfig +'rpx '+ lrConfig +'rpx;'" v-if="description">
|
||||
<!-- <view>大法官好地方规划的法规</view> -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<jyf-parser :domain='domain' :html="description.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="description" v-html="description"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import parser from "@/components/jyf-parser/jyf-parser";
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
export default {
|
||||
name: 'richText',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"jyf-parser": parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tagStyle: {
|
||||
img: 'width:100%;'
|
||||
},
|
||||
bgColor:this.dataConfig.bgColor.color[0].item,
|
||||
lrConfig:this.dataConfig.lrConfig.val,
|
||||
description:this.dataConfig.richText.val,
|
||||
udConfig:this.dataConfig.udConfig.val * 2,
|
||||
domain: HTTP_REQUEST_URL,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.richText{
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<view v-if="spikeList.length > 0" class="skeleton-rect" :style="'margin-top:'+mbConfig+'rpx'">
|
||||
<view class="seckill-count" :class="'wrapper-count'+styleType" :style="'background:'+bgColor+';border-radius:'+bgStyle+'rpx'">
|
||||
<view class="spike-bd">
|
||||
<view class="acea-row row-middle">
|
||||
<image class="title-img" :src="`${domain}/static/images/spike_title.png`"></image>
|
||||
<view class="spike-distance">
|
||||
<text :style="'background-color:'+countDownColor" class="text bg-red">距结束</text>
|
||||
<countDown class="spike-count" :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="':'" :minute-text="':'" :second-text="' '" :datatime="datatime" :colors="themeColor" @getProduct="getProduct"></countDown>
|
||||
</view>
|
||||
</view>
|
||||
<navigator v-if="!merId" url="/pages/activity/goods_seckill/index" class="more-btn" hover-class="none">
|
||||
更多惊喜
|
||||
<text class="iconfont icon-jiantou" hover-class="none"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="spike-wrapper" :class="'wrapper'+styleType">
|
||||
<scroll-view v-if="styleType != 2" :class="'colum'+styleType" :scroll-x="styleType == 0 ? true : false" show-scrollbar="false">
|
||||
<navigator
|
||||
class="spike-item"
|
||||
v-for="(item, index) in spikeList"
|
||||
:key="index"
|
||||
:url="'/pages/activity/goods_seckill_details/index?id=' + item.product_id + '&time=' + item.stop + ''"
|
||||
hover-class="none">
|
||||
<view class="img-box" :class="'img-box'+conStyle">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view v-if="titleShow" class="name line1">{{ item.store_name }}</view>
|
||||
<view v-if="progressShow" class="stock-box">
|
||||
<view class="grabbed" :style="'width:' + item.percent + ';'"></view>
|
||||
<text class="stock-sales">{{ item.percent }}</text>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<text class="price">
|
||||
<text>￥</text>
|
||||
{{ item.price }}
|
||||
</text>
|
||||
<text v-if="priceShow" class="old-price">
|
||||
<text>￥</text>
|
||||
{{ item.ot_price }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</scroll-view>
|
||||
<block v-else class="acea-row row-between-wrapper combination">
|
||||
<navigator
|
||||
class="combination-item"
|
||||
v-for="(item, index) in spikeList"
|
||||
:key="index"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination${index+1}.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/goods_seckill_details/index?id=' + item.product_id + '&time=' + item.stop + ''"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ item.store_name }}</view>
|
||||
<text class="price">
|
||||
<text>￥</text>
|
||||
{{ item.price }}
|
||||
</text>
|
||||
<text class="gocom_btn">
|
||||
去抢购
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="spikeList.length == 1"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination2.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/goods_seckill_details/index?id=' + spikeList[0].product_id + '&time=' + spikeList[0].stop + ''"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ spikeList[0].store_name }}</view>
|
||||
<text class="price">
|
||||
<text>￥</text>
|
||||
{{ spikeList[0].price }}
|
||||
</text>
|
||||
<text class="gocom_btn">
|
||||
去抢购
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="spikeList[0].image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="spikeList.length == 1"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/goods_seckill_details/index?id=' + spikeList[0].product_id + '&time=' + spikeList[0].stop + ''"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ spikeList[0].store_name }}</view>
|
||||
<text class="price">
|
||||
<text>￥</text>
|
||||
{{ spikeList[0].price }}
|
||||
</text>
|
||||
<text class="gocom_btn">
|
||||
去抢购
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="spikeList[0].image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-if="spikeList.length == 2"
|
||||
class="combination-item"
|
||||
hover-class="none"
|
||||
:style="{ 'background-image': `url(${domain}/static/images/combination3.png)`,'border-radius':`${conStyle}rpx`}"
|
||||
:url="'/pages/activity/goods_seckill_details/index?id=' + spikeList[1].product_id + '&time=' + spikeList[1].stop + ''"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="price-box combination-price">
|
||||
<view v-if="titleShow" class="name line1">{{ spikeList[1].store_name }}</view>
|
||||
<text class="price">
|
||||
<text>￥</text>
|
||||
{{ spikeList[1].price }}
|
||||
</text>
|
||||
<text class="gocom_btn">
|
||||
去抢购
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-box">
|
||||
<easy-loadimage mode="widthFix" :image-src="spikeList[1].image"></easy-loadimage>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import countDown from '@/components/countDown';
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
import {
|
||||
getSeckillIndexTime,
|
||||
getSeckillList
|
||||
} from '@/api/activity.js';
|
||||
export default {
|
||||
name: 'seckill',
|
||||
components:{
|
||||
countDown,
|
||||
easyLoadimage
|
||||
},
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
domain: HTTP_REQUEST_URL,
|
||||
datatime:0,
|
||||
spikeList: [],
|
||||
countDownColor: this.dataConfig.countDownColor.color[0].item,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
styleType: this.dataConfig.tabConfig.tabVal, //单行，多行，板块
|
||||
mbConfig: this.dataConfig.mbConfig.val*2,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
conStyle: this.dataConfig.conStyle.type ? 16 : 0,
|
||||
priceShow: this.dataConfig.priceShow.val,
|
||||
progressShow: this.dataConfig.progressShow.val,
|
||||
titleShow: this.dataConfig.titleShow.val
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getSpikeProduct();
|
||||
this.getSpeckillCutTime();
|
||||
},
|
||||
methods: {
|
||||
// 获取秒杀截止时间
|
||||
getSpeckillCutTime() {
|
||||
getSeckillIndexTime().then(res => {
|
||||
this.datatime = res.data.seckillEndTime ? res.data.seckillEndTime : '';
|
||||
});
|
||||
},
|
||||
getSpikeProduct() {
|
||||
let that = this;
|
||||
getSeckillList({
|
||||
mer_id:that.merId,limit: that.styleType == 2 ? 3 : 12
|
||||
}).then(res => {
|
||||
that.spikeList = res.data.list;
|
||||
that.spikeList.map(item => {
|
||||
item.percent = item.stock === 0 ? '0%' : ((item.sales * 100) / item.stock).toFixed(2) + '%';
|
||||
});
|
||||
}).catch(e => {});
|
||||
},
|
||||
getProduct(){
|
||||
this.getSpeckillCutTime();
|
||||
this.getSpikeProduct();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/main.scss';
|
||||
.seckill-count {
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 0 26rpx 20rpx;
|
||||
box-shadow: 4rpx 2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
|
||||
&.wrapper-count2{
|
||||
padding: 24rpx 20rpx 26rpx;
|
||||
}
|
||||
}
|
||||
.spike-count{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/.spike-bd .red{
|
||||
color: #e93323!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
<template>
|
||||
<view :style="'margin-top:' +mbConfig+'rpx;background:'+bgColor">
|
||||
<view class="explosion" :style="'margin:0 '+prConfig+'rpx'">
|
||||
<view class="common-hd" mode="widthFix" v-if="logoUrl">
|
||||
<image class="title-img" mode="widthFix" :src="logoUrl"></image>
|
||||
</view>
|
||||
<view class="mer-box">
|
||||
<block v-if="tabConfig == 0">
|
||||
<view class="mer-item" v-for="(item, index) in brandList" :key="index" :style="'border-radius:'+bgStyle+'rpx'">
|
||||
<view class="mer-hd" @click="goStore(item.mer_id)" :style="'border-radius:'+bgStyle+'rpx '+bgStyle+'rpx 0 0'">
|
||||
<image :src="item.mer_banner"></image>
|
||||
<view class="mer-name">
|
||||
<image :src="item.mer_avatar"></image>
|
||||
<view class="txt line1">{{ item.mer_name }}</view>
|
||||
<text v-if="item.type_name" class="store_type" :style="'background:'+themeColor">{{ item.type_name }}</text>
|
||||
<text v-else-if="item.is_trader" class="store_type" :style="'background:'+themeColor">自营</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-box">
|
||||
<navigator
|
||||
:url="`/pages/goods_details/index?id=${itemn.product_id}`"
|
||||
hover-class="none"
|
||||
class="pro-item"
|
||||
v-for="(itemn, indexn) in item.recommend"
|
||||
:key="indexn"
|
||||
v-if="item.recommend.length <= 3"
|
||||
>
|
||||
<view class="picture">
|
||||
<easy-loadimage mode="widthFix" :image-src="itemn.image"></easy-loadimage>
|
||||
<view v-if="itemn.border_pic" :style="{ backgroundImage: `url(${itemn.border_pic})` }" class="border-picture"></view>
|
||||
</view>
|
||||
<view v-if="titleShow" class="name line1">{{itemn.store_name}}</view>
|
||||
<view v-if="priceShow" class="price" :style="'color:'+themeColor">
|
||||
<text>￥</text>
|
||||
{{ itemn.price }}
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="mer_count">
|
||||
<view class="item" v-for="(item, index) in brandList" :key="index" @click="goStore(item.mer_id)">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.mer_avatar"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="more-shop" @click="moreShop">
|
||||
<text>更多店铺</text>
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
import { storeMerchantList } from '@/api/store.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { configMap } from '@/utils';
|
||||
export default {
|
||||
computed: configMap(['hide_mer_status']),
|
||||
components: {
|
||||
easyLoadimage
|
||||
},
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
brandList: [],
|
||||
mbConfig: this.dataConfig.mbConfig.val*2, //页面间距
|
||||
prConfig: this.dataConfig.prConfig.val*2, //背景间距
|
||||
logoUrl: this.dataConfig.logoConfig.url,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? '16' : 0,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
tabConfig: this.dataConfig.tabConfig.tabVal, //展示样式
|
||||
numConfig: this.dataConfig.numConfig.val,
|
||||
titleShow: this.dataConfig.titleShow.val,
|
||||
priceShow: this.dataConfig.priceShow.val
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.storeMerchant();
|
||||
},
|
||||
methods: {
|
||||
// 进店看看
|
||||
goStore(id) {
|
||||
if (this.hide_mer_status != 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/store/home/index?id=${id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
// 更多店铺
|
||||
moreShop() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/store/shopStreet/index?cate_id=&type_id=`
|
||||
});
|
||||
},
|
||||
// 品牌好店
|
||||
storeMerchant() {
|
||||
storeMerchantList({
|
||||
page: 1,
|
||||
limit: this.numConfig ? this.numConfig : 4,
|
||||
is_best: 1
|
||||
}).then(res => {
|
||||
this.brandList = res.data.list;
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.explosion {
|
||||
.common-hd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.title-img{
|
||||
width: 242rpx;
|
||||
}
|
||||
}
|
||||
.mer-box {
|
||||
margin-bottom: 20rpx;
|
||||
.mer-item {
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
.mer-hd {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
overflow: hidden;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.mer-name {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 20rpx;
|
||||
display: flex;
|
||||
max-width: 60%;
|
||||
padding: 8rpx 8rpx 8rpx 4rpx;
|
||||
border-radius: 26rpx;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.txt {
|
||||
flex: 1;
|
||||
line-height: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
.store_type {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
background-color: #e93323;
|
||||
padding: 0 5px;
|
||||
line-height: 19px;
|
||||
height: 19px;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.easy-loadimage,/deep/uni-image,image,/deep/.loadfail-img{
|
||||
width: 100%;
|
||||
height: 214rpx;
|
||||
}
|
||||
.pro-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 20rpx 30rpx;
|
||||
.pro-item {
|
||||
width: 31.3%;
|
||||
margin-right: 3.05%;
|
||||
.picture,/deep/.easy-loadimage,/deep/uni-image,/deep/image,/deep/.loadfail-img {
|
||||
width: 100%;
|
||||
height: 214rpx;
|
||||
position: relative;
|
||||
}
|
||||
.sell_out {
|
||||
display: flex;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: rgba(0,0,0,.6);
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -55rpx 0 0 -55rpx;
|
||||
&::before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100%;
|
||||
border: 1px dashed #fff;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
}
|
||||
}
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
.name{
|
||||
padding: 6rpx 9rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.price {
|
||||
margin-top: 5rpx;
|
||||
font-size: 28rpx;
|
||||
color: $theme-color;
|
||||
font-weight: bold;
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.picture {
|
||||
position: relative;
|
||||
}
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-shop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ffffff;
|
||||
padding: 27rpx 0;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
.icon-xiangyou {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mer_count{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx;
|
||||
align-items: center;
|
||||
.item{
|
||||
width: 23.5%;
|
||||
height: 140rpx;
|
||||
margin: 0 2% 10px 0;
|
||||
background: #FEFEFF;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/deep/uni-image,/deep/image,/deep/.easy-loadimage{
|
||||
width: 140rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
&:nth-child(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<view class="swiperBg" :style="'margin-top:' + marginTop +'rpx;background: linear-gradient(180deg, '+ bgColor0 +' 50%, '+ bgColor1 +' 100%);'">
|
||||
<!-- 单图模式 -->
|
||||
<block v-if="swiperType == 0">
|
||||
<view class="item-img" v-for="(item,index) in imgUrls" :key="index" :style="{padding:'0 '+paddinglr+'rpx',marginBottom:itemEdge+'rpx'}">
|
||||
<image @click="goDetail(item)" :src="item.img"></image></view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="swiper page_swiper" :class="[docConfig == 1 ? 'square' : docConfig == 0 ? 'circular' : 'nodoc',imgConfig?'':'fillet','dot'+txtStyle]"
|
||||
:style="'padding: 0 '+ paddinglr +'rpx;'"
|
||||
v-if="imgUrls.length">
|
||||
<swiper
|
||||
indicator-dots="true"
|
||||
:autoplay="true"
|
||||
:circular="circular"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
indicator-color="rgba(255,255,255,0.6)"
|
||||
indicator-active-color="#fff"
|
||||
:current="swiperCur"
|
||||
previous-margin="20rpx"
|
||||
next-margin="20rpx"
|
||||
@change="swiperChange"
|
||||
>
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" class="slide-image aa"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {merPath} from "@/utils/index"
|
||||
|
||||
export default {
|
||||
name: 'swiperBg',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
imgUrls: [], //图片轮播数据
|
||||
bgColor0: this.dataConfig.isShow.val ? this.dataConfig.bgColor.color[0].item : 'transparent', //轮播背景颜色
|
||||
bgColor1: this.dataConfig.isShow.val ? this.dataConfig.bgColor.color[1].item : 'transparent', //轮播背景颜色
|
||||
marginTop: this.dataConfig.mbConfig.val, //组件上边距
|
||||
paddinglr: this.dataConfig.lrConfig.val, //轮播左右边距
|
||||
docConfig: this.dataConfig.docConfig.type, //指示点样式
|
||||
imgConfig: this.dataConfig.imgConfig.type, //是否为圆角
|
||||
txtStyle: this.dataConfig.txtStyle.type, //指示器位置
|
||||
imageH: 310,
|
||||
swiperCur: 0,
|
||||
swiperType: 1,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
imageH(nVal, oVal) {
|
||||
let self = this
|
||||
this.imageH = nVal
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.imgUrls = this.dataConfig.swiperConfig.list
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
this.$nextTick(function() {
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: function(res) {
|
||||
that.$set(that, 'imageH', res.height);
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', 310);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
swiperChange(e) {
|
||||
let { current, source } = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.swiperCur = e.detail.current;
|
||||
}
|
||||
},
|
||||
goDetail(url){
|
||||
let urls = url.info[1].value
|
||||
urls = merPath(urls, this.merId)
|
||||
if(urls.indexOf("http") != -1){
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
}else{
|
||||
if(['/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index','/pages/plant_grass/index'].indexOf(urls) == -1){
|
||||
uni.navigateTo({
|
||||
url:urls
|
||||
})
|
||||
}else{
|
||||
uni.switchTab({
|
||||
url:urls
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiperBg {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
.colorBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 130rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.page_swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
overflow-x: hidden;
|
||||
/* #ifdef MP */
|
||||
z-index: 20;
|
||||
/* #endif */
|
||||
/* 设置圆角 */
|
||||
&.fillet {
|
||||
.swiper-item, image, .acea-row.row-between-wrapper{
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.swiper-item, image, .acea-row.row-between-wrapper {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
swiper{
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
image {
|
||||
transform: scale(0.93);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
swiper-item.active {
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
// 圆形指示点
|
||||
&.circular {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
/deep/.uni-swiper-dot-active {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
// 方形指示点
|
||||
&.square {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 20rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 3rpx;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
/deep/.uni-swiper-dot-active {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
&.nodoc{
|
||||
/deep/.uni-swiper-dot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.dot0 .uni-swiper-dots-horizontal{
|
||||
left: 10%;
|
||||
}
|
||||
/deep/.dot1 .uni-swiper-dots-horizontal{
|
||||
left: 50%;
|
||||
}
|
||||
/deep/.dot2 .uni-swiper-dots-horizontal{
|
||||
left: 90%;
|
||||
}
|
||||
.item-img image{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<view style="visibility: hidden;" :style="{ height: navHeight + 'rpx' }" v-if="isFixed"></view>
|
||||
<!-- #endif -->
|
||||
<view class="navTabBox tabNav" :class="{isFixed:isFixed}" :style="'background: '+ bgColor +';margin-top:'+mbConfig+'rpx;color:'+txtColor+';top:'+isTop">
|
||||
<view class="longTab" :style='"width:"+mainWidth+"px"'>
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
|
||||
<view class="longItem" :style="'width:'+isWidth+'px;color:' + (index===tabClick ? activeColor : txtColor)" :data-index="index" :class="index===tabClick?'click':''" v-for="(item,index) in tabTitle" :key="index" :id="'id'+index" @click="longClick(index,item.store_category_id,item.pid)">{{item.cate_name}}</view>
|
||||
<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
|
||||
<view class="underline" :style="'background-color:'+activeColor"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<navigator v-if="merId" :url="'/pages/store/home/index?id='+merId+'&type=2'" class="category" hover-class="none" :style="'background-color:'+bgColor+';color:'+txtColor">
|
||||
<text class="iconfont icon-fenlei3"></text>分类
|
||||
</navigator>
|
||||
<navigator v-else open-type='switchTab' url="/pages/goods_cate/goods_cate" class="category" hover-class="none" :style="'background-color:'+bgColor+';color:'+txtColor">
|
||||
<text class="iconfont icon-fenlei3"></text>分类
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
let app = getApp();
|
||||
export default {
|
||||
name: 'navTab',
|
||||
props: {
|
||||
tabTitle: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabClick: 0, //导航栏被点击
|
||||
isLeft: 0, //导航栏下划线位置
|
||||
isWidth: 0, //每个导航栏占位
|
||||
mainWidth: 0,
|
||||
tabLeft:0,
|
||||
swiperIndex:0,
|
||||
childIndex:0,
|
||||
childID:0,
|
||||
bgColor:this.dataConfig.bgColor.color[0].item,
|
||||
mbConfig:this.dataConfig.mbConfig.val * 2,
|
||||
txtColor:this.dataConfig.txtColor.color[0].item,
|
||||
activeColor: this.dataConfig.activeColor.color[0].item,
|
||||
fixedTop: 0,
|
||||
isTop: 0,
|
||||
navHeight: 38,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var that = this
|
||||
// 获取设备宽度
|
||||
uni.getSystemInfo({
|
||||
success(e) {
|
||||
that.mainWidth = e.windowWidth
|
||||
that.isWidth = (e.windowWidth-65) / 4
|
||||
}
|
||||
})
|
||||
setTimeout((e) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.navTabBox').boundingClientRect(data => {
|
||||
|
||||
that.navHeight = data.height * 2
|
||||
that.$emit('bindHeight', data)
|
||||
}).exec();
|
||||
}, 300)
|
||||
that.$nextTick(function() {
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
that.windowHeight = res.windowHeight;
|
||||
}
|
||||
});
|
||||
})
|
||||
// #ifdef MP || APP-PLUS
|
||||
this.isTop = (uni.getSystemInfoSync().statusBarHeight + 43) + 'px'
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.isTop = 0
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 导航栏点击
|
||||
longClick(index,id,fid){
|
||||
app.globalData.fid = fid;
|
||||
this.childIndex = 0;
|
||||
if(this.tabTitle.length>3){
|
||||
var tempIndex = index - 2;
|
||||
tempIndex = tempIndex<=0 ? 0 : tempIndex;
|
||||
this.tabLeft = (index-2) * this.isWidth //设置下划线位置
|
||||
}
|
||||
this.tabClick = index //设置导航点击了哪一个
|
||||
this.isLeft = index * this.isWidth //设置下划线位置
|
||||
let obj = {
|
||||
index:index,
|
||||
pid:id//自己的id
|
||||
}
|
||||
if(!this.merId){
|
||||
this.parentEmit(obj);
|
||||
}else{
|
||||
if(id){
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/list/index?id='+id+'&mer_id='+this.merId
|
||||
});
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url: '/pages/store/home/index?id='+this.merId
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
parentEmit(obj){
|
||||
this.$emit('changeTab', obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabNav {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.navTabBox {
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
position: relative;
|
||||
padding-bottom: 10rpx;
|
||||
&.isFixed {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
.click {
|
||||
color: white;
|
||||
}
|
||||
.longTab {
|
||||
/* #ifdef H5 */
|
||||
padding-right: 106rpx;
|
||||
/* #endif */
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
padding-right: 116rpx;
|
||||
/* #endif */
|
||||
.longItem{
|
||||
height: 50upx;
|
||||
display: inline-block;
|
||||
line-height: 50upx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
max-width: 160rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.click{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #E93323;
|
||||
}
|
||||
}
|
||||
.underlineBox {
|
||||
height: 3px;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
transition: .5s;
|
||||
.underline {
|
||||
width: 33rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.category{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10rpx;
|
||||
/* #ifdef H5 */
|
||||
width: 132rpx;
|
||||
/* #endif */
|
||||
/* #ifdef MP */
|
||||
width: 120rpx;
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS */
|
||||
width: 150rpx;
|
||||
/* #endif */
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
z-index: 3;
|
||||
padding: 0 15rpx 0 25rpx;
|
||||
.iconfont{
|
||||
font-size: 30rpx;
|
||||
margin-right:6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.child-box{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
/* #ifdef H5 */
|
||||
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.02);
|
||||
/* #endif */
|
||||
/* #ifdef MP */
|
||||
box-shadow: 0 2rpx 3rpx 1rpx #f9f9f9;
|
||||
/* #endif */
|
||||
.wrapper{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
background: #fff;
|
||||
}
|
||||
.child-item{
|
||||
flex-shrink: 0;
|
||||
width:140rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10rpx;
|
||||
image{
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.txt{
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
&.on{
|
||||
image{
|
||||
border: 1px solid $theme-color-opacity;
|
||||
}
|
||||
.txt{
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<view v-if="titleConfig">
|
||||
<navigator :url="path(linkConfig)" hover-class="none" class='title' :class="[(textPosition==0?'left':textPosition==2?'right':''),(textStyle==1?'italics':textStyle==2?'blod':'')]" :style="'font-size:'+fontSize+'rpx;margin:'+mbConfig+'rpx '+prConfig+'rpx 0;background-color:'+titleColor+';border-radius:'+bgStyle+'rpx;'">
|
||||
<view :style="'color:'+textColor">{{titleConfig}}</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {merPath} from "@/utils/index"
|
||||
export default {
|
||||
name: 'titles',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fontSize:this.dataConfig.fontSize.val*2,
|
||||
linkConfig:this.dataConfig.linkConfig.value,
|
||||
mbConfig:this.dataConfig.mbConfig.val*2,
|
||||
prConfig:this.dataConfig.prConfig.val*2,
|
||||
textPosition:this.dataConfig.textPosition.type,
|
||||
textStyle:this.dataConfig.textStyle.type,
|
||||
titleColor:this.dataConfig.titleColor.color[0].item,
|
||||
titleConfig:this.dataConfig.titleConfig.value,
|
||||
textColor:this.dataConfig.themeColor.color[0].item,
|
||||
bgStyle:this.dataConfig.bgStyle.type ? '16' : '0'
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods:{
|
||||
path(url){
|
||||
return merPath(url, this.merId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
&.left{
|
||||
text-align: left;
|
||||
}
|
||||
&.right{
|
||||
text-align: right;
|
||||
}
|
||||
&.blod{
|
||||
font-weight: bold;
|
||||
}
|
||||
&.italics{
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<view v-if="activityData.length > 0" :style="'margin-top:'+mbConfig+'rpx;'" class="skeleton-rect">
|
||||
<view class="activity_count" :style="'background:'+bgColor+';margin: 0 '+prConfig+'rpx;border-radius:'+bgStyle+'rpx'">
|
||||
<view class="spike-bd">
|
||||
<view class="title">
|
||||
<image class="title-img" :src="`${domain}/static/images/topic_title.png`"></image>
|
||||
</view>
|
||||
<navigator :url="merId ? '/pages/store/home/index?id='+merId+'&type=4' : '/pages/activity/topic/index'" class="more-btn" hover-class="none">
|
||||
进入专场
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view v-if="activityData.length">
|
||||
<!-- 单图模式 -->
|
||||
<block v-if="activityData.length == 1">
|
||||
<view class="topic_swiper"
|
||||
v-for="(item,index) in activityData"
|
||||
:key="index"
|
||||
@click="goTopicDetail(item.info[1].value)">
|
||||
<image :src="item.img"></image>
|
||||
</view>
|
||||
</block>
|
||||
<view v-else class="topic_swiper" :class="[pointerStyle?'circular':'square',conStyle?'':'fillet','dot'+txtStyle]">
|
||||
<swiper indicator-dots="true" :autoplay="autoplay" :circular="true" :interval="2500" :duration="duration"
|
||||
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="rgba(233, 51, 35, 1)">
|
||||
<block v-for="(item,index) in activityData" :key="index">
|
||||
<swiper-item>
|
||||
<view @click="goTopicDetail(item.info[1].value)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" class="slide-image"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
export default {
|
||||
name: 'topic',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {
|
||||
type: String || Number,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
autoplay: true,
|
||||
duration: 500,
|
||||
activityData: this.dataConfig.menuConfig.list,
|
||||
bgColor: this.dataConfig.colorShow.val ? this.dataConfig.bgColor.color[0].item : 'transparent',
|
||||
mbConfig: this.dataConfig.mbConfig.val*2, //页面间距
|
||||
prConfig: this.dataConfig.prConfig.val*2, //背景间距
|
||||
txtStyle: this.dataConfig.txtStyle.type,
|
||||
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
|
||||
colorShow: this.dataConfig.colorShow.val,
|
||||
pointerStyle: this.dataConfig.pointerStyle.type, //指示点样式
|
||||
conStyle: this.dataConfig.conStyle.type, //内容样式
|
||||
domain: HTTP_REQUEST_URL,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
goTopicDetail(url) {
|
||||
if(url.indexOf("http") != -1){
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
}else{
|
||||
if(['/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index'].indexOf(url) == -1){
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}else{
|
||||
uni.switchTab({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/main.scss';
|
||||
.activity_count{
|
||||
margin-bottom: 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
padding: 24rpx 20rpx 26rpx;
|
||||
/deep/swiper-item,uni-swiper-item,swiper{
|
||||
height: 278rpx;
|
||||
}
|
||||
/deep/uni-image,/deep/image,/deep/.easy-loadimage{
|
||||
width: 650rpx;
|
||||
height: 278rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
/deep/.uni-swiper-wrapper{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.topic_swiper{
|
||||
width: 650rpx;
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
&.fillet {
|
||||
border-radius: 0;
|
||||
/deep/uni-image,/deep/image,/deep/.easy-loadimage{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
// 圆形指示点
|
||||
&.circular {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
/deep/.uni-swiper-dot-active {
|
||||
background: rgba(233, 51, 35, 1);
|
||||
}
|
||||
}
|
||||
// 方形指示点
|
||||
&.square {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 20rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 3rpx;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
/deep/.uni-swiper-dot-active {
|
||||
background: rgba(233, 51, 35, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.dot0 .uni-swiper-dots-horizontal{
|
||||
left: 10%;
|
||||
}
|
||||
/deep/.dot1 .uni-swiper-dots-horizontal{
|
||||
left: 50%;
|
||||
}
|
||||
/deep/.dot2 .uni-swiper-dots-horizontal{
|
||||
left: 90%;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,386 @@
|
|||
.main {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.spike-bd {
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 20rpx 0 10rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
.title-img{
|
||||
width: 136rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
font-size: 0;
|
||||
.title-img{
|
||||
width: 136rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
.spike-distance {
|
||||
margin-left: 15rpx;
|
||||
position: relative;
|
||||
top: 1.4rpx;
|
||||
display: flex;
|
||||
border: 1px solid #e93323;
|
||||
border-radius: 4rpx;
|
||||
height: 40rpx;
|
||||
padding-left: 92rpx;
|
||||
.bg-red {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background-color: #e93323;
|
||||
padding: 0 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 110%;
|
||||
position: absolute;
|
||||
left: -1rpx;
|
||||
top: -2rpx;
|
||||
width: 92rpx;
|
||||
border-radius: 4rpx 0 0 4rpx;
|
||||
}
|
||||
.time {
|
||||
font-size: 22rpx;
|
||||
padding: 0 12rpx;
|
||||
color: #e93323;
|
||||
height: 36rpx;
|
||||
line-height: 38rpx;
|
||||
/deep/.red {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.red-color {
|
||||
color: #e93323;
|
||||
}
|
||||
}
|
||||
.more-btn {
|
||||
color: #282828;
|
||||
font-size: 24rpx;
|
||||
.iconfont {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colum0{
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
.combination-item {
|
||||
/* #ifdef MP */
|
||||
width: 294rpx;
|
||||
height: 140rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 || APP-PLUS */
|
||||
width: 328rpx;
|
||||
height: 180rpx;
|
||||
/* #endif */
|
||||
display: inline-block;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 16rpx;
|
||||
.img-box {
|
||||
width: 122rpx;
|
||||
height: 122rpx;
|
||||
position: absolute;
|
||||
/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 122rpx;
|
||||
height: 122rpx;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.price {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 8rpx;
|
||||
color: #e93323;
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.gocom_btn {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
width: 100rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
border-radius: 16rpx;
|
||||
text {
|
||||
font-weight: normal;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) {
|
||||
/* #ifdef MP */
|
||||
height: 336rpx;
|
||||
/* #endif */
|
||||
/* #ifdef H5 || APP-PLUS */
|
||||
height: 378rpx;
|
||||
/* #endif */
|
||||
padding: 20rpx 20rpx 28rpx;
|
||||
float: left;
|
||||
.img-box {
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
right: 18rpx;
|
||||
bottom: 18rpx;
|
||||
/deep/image,/deep/.easy-loadimage,/deep/uni-image {
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
}
|
||||
}
|
||||
.gocom_btn {
|
||||
background: linear-gradient(90deg, #fd5d48 0%, #f63724 100%);
|
||||
}
|
||||
}
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
float: right;
|
||||
padding: 20rpx 18rpx;
|
||||
.name {
|
||||
width: 148rpx;
|
||||
}
|
||||
.img-box {
|
||||
right: 14rpx;
|
||||
bottom: 14rpx;
|
||||
/deep/image,/deep/.easy-loadimage,/deep/uni-image{
|
||||
width: 122rpx;
|
||||
height: 122rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.gocom_btn {
|
||||
background: linear-gradient(90deg, #fdca1a 0%, #f7b21f 100%);
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
margin-top: 18rpx;
|
||||
.img-box {
|
||||
right: 14rpx;
|
||||
bottom: 14rpx;
|
||||
}
|
||||
.gocom_btn {
|
||||
background: linear-gradient(90deg, #ffb052 0%, #fe961a 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.spike-wrapper {
|
||||
width: 100%;
|
||||
&.wrapper2{
|
||||
overflow: hidden;
|
||||
}
|
||||
.spike-item {
|
||||
display: inline-block;
|
||||
width: 222rpx;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
&.presell-item {
|
||||
width: 210rpx;
|
||||
.img-box {
|
||||
height: 210rpx;
|
||||
/deep/image,/deep/.easy-loadimage,uni-image{
|
||||
height: 210rpx;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
margin-top: 8rpx;
|
||||
color: #282828;
|
||||
}
|
||||
}
|
||||
&.assist-item {
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.img-box {
|
||||
position: relative;
|
||||
height: 222rpx;
|
||||
.participants {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
/deep/image,/deep/.easy-loadimage,uni-image {
|
||||
width: 100%;
|
||||
height: 222rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.box_bg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
width: 149rpx;
|
||||
height: 42rpx;
|
||||
line-height: 42rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.msg {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 16rpx;
|
||||
width: 86rpx;
|
||||
height: 30rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(255, 109, 96, 1);
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
/deep/.img-box0 image,/deep/.img-box0 .easy-loadimage,/deep/.img-box0 uni-image {
|
||||
border-radius: 0;
|
||||
}
|
||||
.info {
|
||||
margin-top: 10rpx;
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.stock-box {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background-color: #ffdcd9;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 13rpx;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
line-height: 20rpx;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
.grabbed {
|
||||
height: 20rpx;
|
||||
background: linear-gradient(#ff0000, #ff5400);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.stock-sales {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -40rpx;
|
||||
}
|
||||
}
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 4rpx;
|
||||
&.presell-price {
|
||||
display: block;
|
||||
.old-price {
|
||||
display: block;
|
||||
margin: 6rpx 0 0 0;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background-color: $theme-color;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
color: $theme-color;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
.old-price {
|
||||
display: flex;
|
||||
margin-left: 10rpx;
|
||||
color: #aaaaaa;
|
||||
text-decoration: line-through;
|
||||
font-size: 20rpx;
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.assist-info {
|
||||
.price {
|
||||
display: flex;
|
||||
color: $theme-color;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 8rpx;
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
.assist_price {
|
||||
font-size: 20rpx;
|
||||
display: inline-block;
|
||||
width: 82rpx;
|
||||
height: 32rpx;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
background: #ffeae5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
&.assist-info1{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.price-box {
|
||||
padding: 15rpx 15rpx 8rpx;
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.initiate_btn {
|
||||
width: 100%;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
background: linear-gradient(90deg, #ff0000 0%, #ff5400 100%);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
margin: 0 auto;
|
||||
&.initiate_btn1{
|
||||
width: 90%;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wrapper1{
|
||||
.spike-item{
|
||||
width: 210rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,699 @@
|
|||
<template>
|
||||
<view class="gather">
|
||||
<block v-if="isShow&&userInfoData.mer_info.mer_name">
|
||||
<view class="" v-if="userInfoData.mer_info.business_status==2">
|
||||
<view class="special_work com" v-if="userInfoData.mer_info.type_code === 'TypeSupplyChain'">
|
||||
<view class="special_work com" v-if="true">
|
||||
<view class="title">市级供应链</view>
|
||||
<view class="content">
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/nongKe/supply_chain/goods_list?merid=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}zsgl.png`" mode="aspectFill"></image>
|
||||
<text class="text">在售管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order/index?mer_id=${mer_id}&product_type=98&type_id=${userInfoData.mer_info.type_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}cwgl.png`" mode="aspectFill"></image>
|
||||
<text class="text">财务管理</text>
|
||||
</view>
|
||||
<!-- <view class="examine"
|
||||
@click="navigator(`/pages/admin/financial_management/index?mer_id=${mer_id}&product_type=98&type_id=${userInfoData.mer_info.type_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}cwgl.png`" mode="aspectFill"></image>
|
||||
<text class="text">财务管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order/index?mer_id=${mer_id}&product_type=98&type_id=${userInfoData.mer_info.type_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddgl.png`" mode="aspectFill"></image>
|
||||
<text class="text">订单管理</text>
|
||||
</view> -->
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/nongKe/gather/select_warehouse?mer_id=${mer_id}&stype=1`)">
|
||||
<image class="icon_img" :src="`${prefix}rkgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">入库管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/basicSet?mer_id=${mer_id}&product_type=98`, '商户设置')">
|
||||
<image class="icon_img" :src="`${prefix}shsz.png`" mode="aspectFill"></image>
|
||||
<text class="text">商户设置</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/transactionApplication/index?mer_id=${mer_id}`, '交易申请')">
|
||||
<image class="icon_img" src="@/static/images/jy.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">交易申请</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator(`/pages/product/list/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}spgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商品管理</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator(`/pages/users/embody/embody?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}txgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">提现管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order_cancellation/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddhx.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单核销</text>
|
||||
</view>
|
||||
<!-- <view class="examine"
|
||||
@click="navigator(`/pages/commissionedSales/index/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" src="@/static/images/weituo.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">委托销售</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/users/order_list/relase?mer_id=${mer_id}&status=-1`)">
|
||||
<image class="icon_img" src="@/static/images/weituo.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">委托订单</text>
|
||||
</view> -->
|
||||
<!-- <view class="examine" @click="navigator(`/pages/nongKe/teach_video/teach_video`)">
|
||||
<image class="icon_img"
|
||||
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/spjs.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">视频教学</text>
|
||||
</view> -->
|
||||
<!-- <view class="examine" @click="navigator(`/pages/users/user_invoice_Finance/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" src="@/static/images/cwgk.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">财务公开</text>
|
||||
</view> -->
|
||||
<!-- <view class="examine" @click="navigator(`/pages/admin/order/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单管理</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="business com"
|
||||
v-if="userInfoData.mer_info.type_code === 'TypeStore'||userInfoData.mer_info.type_code === 'TypeTownSupplyChain'">
|
||||
<view class="business com" v-if="true">
|
||||
<view class="special_work com">
|
||||
<view class="title">我的店铺</view>
|
||||
<view class="content ">
|
||||
<!-- <view class="examine"
|
||||
|
||||
|
||||
@click="navigator(`/pages/users/supply_procurement/index?type_id=12&isDetail=1&product_type=98&cate_id=${userInfoData.mer_info.category_id}`)">
|
||||
|
||||
<image class="icon_img" :src="`${prefix}ghcg.png`" mode="aspectFill"></image>
|
||||
<text class="text">供货采购</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator('/pages/users/order_list/indexCopy?status=-1&product_type=98')">
|
||||
<image class="icon_img" :src="`${prefix}jhgl.png`" mode="aspectFill"></image>
|
||||
<text class="text">进货管理</text>
|
||||
</view> -->
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/stockOut/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}smck.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">扫码出库</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/nongKe/gather/select_warehouse?mer_id=${mer_id}&stype=2`)">
|
||||
<image class="icon_img" :src="`${prefix}rkgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">入库管理</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator(`/pages/users/embody/embody?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}txgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">提现管理</text>
|
||||
</view>
|
||||
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/chat/customer_list/index?type=1&mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}kfjl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">客服记录</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order_cancellation/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddhx.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单核销</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order/index?mer_id=${mer_id}&type_id=${userInfoData.mer_info.type_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单管理</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator(`/pages/product/list/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}spgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商品管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/basicSet?mer_id=${mer_id}`, '商户设置')">
|
||||
<image class="icon_img" :src="`${prefix}shsz.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商户设置</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/transactionApplication/index?mer_id=${mer_id}`, '交易申请')">
|
||||
<image class="icon_img" src="@/static/images/jy.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">交易申请</text>
|
||||
</view>
|
||||
<!-- <view class="examine"
|
||||
@click="navigator(`/pages/users/trading_hall/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" src="@/static/images/diaohuo.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">交易大厅</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/commissionedSales/index/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" src="@/static/images/weituo.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">委托销售</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/users/order_list/relase?mer_id=${mer_id}&status=-1`)">
|
||||
<image class="icon_img" src="@/static/images/weituo.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">委托订单</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/releaseManagement/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" src="@/static/images/fabu.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">发布管理</text>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="examine" @click="navigator(`/pages/users/user_invoice_Finance/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" src="@/static/images/cwgk.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">财务公开</text>
|
||||
</view> -->
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <gatherBusiness :userInfoData="userInfoData" /> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="business com" v-if="userInfoData.mer_info.type_code === 'TypeCloudWarehouse'">
|
||||
<view class="business com" v-if="true">
|
||||
<view class="special_work com">
|
||||
<view class="title">里海云仓</view>
|
||||
<view class="content ">
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/nongKe/supply_chain/supplier?type_id=12&isDetail=1&product_type=98&cate_id=${userInfoData.mer_info.category_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ghcg.png`" mode="aspectFill"></image>
|
||||
<text class="text">供货采购</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator('/pages/users/order_list/index?status=-1')">
|
||||
<image class="icon_img" :src="`${prefix}jhgl.png`" mode="aspectFill"></image>
|
||||
<text class="text">进货管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/stockOut/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}smck.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">扫码出库</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/nongKe/gather/select_warehouse?mer_id=${mer_id}&stype=2`)">
|
||||
<image class="icon_img" :src="`${prefix}rkgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">入库管理</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator(`/pages/users/embody/embody?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}txgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">提现管理</text>
|
||||
</view>
|
||||
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/chat/customer_list/index?type=1&mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}kfjl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">客服记录</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order_cancellation/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddhx.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单核销</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order/index?mer_id=${mer_id}&type_id=${userInfoData.mer_info.type_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单管理</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator(`/pages/product/list/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}spgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商品管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/basicSet?mer_id=${mer_id}`, '商户设置')">
|
||||
<image class="icon_img" :src="`${prefix}shsz.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商户设置</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/transactionApplication/index?mer_id=${mer_id}`, '交易申请')">
|
||||
<image class="icon_img" src="@/static/images/jy.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">交易申请</text>
|
||||
</view>
|
||||
<!-- <view class="examine" @click="navigator(`/pages/users/user_invoice_Finance/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" src="@/static/images/cwgk.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">财务公开</text>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="business com"
|
||||
v-if="userInfoData.mer_info.type_code === 'TypeFeaturedCultural'|| userInfoData.mer_info.type_code === 'TypeFamousSpecialties'|| userInfoData.mer_info.type_code === 'TypeLocalCuisine' ">
|
||||
<view class="business com" v-if="true">
|
||||
<view class="special_work com">
|
||||
<view class="title">我的店铺</view>
|
||||
<view class="content ">
|
||||
|
||||
<view class="examine" @click="navigator(`/pages/users/embody/embody?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}txgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">提现管理</text>
|
||||
</view>
|
||||
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/chat/customer_list/index?type=1&mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}kfjl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">客服记录</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order_cancellation/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddhx.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单核销</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/admin/order/index?mer_id=${mer_id}&type_id=${userInfoData.mer_info.type_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}ddgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">订单管理</text>
|
||||
</view>
|
||||
<view class="examine" @click="navigator(`/pages/product/list/index?mer_id=${mer_id}`)">
|
||||
<image class="icon_img" :src="`${prefix}spgl.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商品管理</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/basicSet?mer_id=${mer_id}`, '商户设置')">
|
||||
<image class="icon_img" :src="`${prefix}shsz.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商户设置</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/transactionApplication/index?mer_id=${mer_id}`, '交易申请')">
|
||||
<image class="icon_img" src="@/static/images/jy.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">交易申请</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="" v-else>
|
||||
<view class="business com">
|
||||
<view class="special_work com">
|
||||
<view class="title">我的店铺</view>
|
||||
<view class="content ">
|
||||
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/basicSet?mer_id=${mer_id}`, '商户设置')">
|
||||
<image class="icon_img" :src="`${prefix}shsz.png`" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">商户设置</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="examine" v-if="userInfoData.mer_info.setting_status==1" @click="navigator(`/pages/product/transactionApplication/index?mer_id=${mer_id}&business_status=${userInfoData.mer_info.business_status}`, '交易申请')">
|
||||
<image class="icon_img" src="@/static/images/jy.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">交易申请</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</block>
|
||||
<view class="" style="padding-top: 1px;" v-else>
|
||||
<emptyPage title="暂无信息"></emptyPage>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import zbpSwiper from '@/components/zbpSwiper'
|
||||
import {
|
||||
mapState,
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
import {
|
||||
getWorkArticleCount,
|
||||
getSlideAPI
|
||||
} from '@/api/article.js'
|
||||
import {
|
||||
getStoreList,
|
||||
getUserInfo
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
getGeocoder,
|
||||
microSeachBarCode,
|
||||
microEadtProduct
|
||||
} from '@/api/store.js'
|
||||
import {
|
||||
Toast
|
||||
} from '@/libs/uniApi';
|
||||
import {
|
||||
getDiy
|
||||
} from '@/api/api.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mTabbar,
|
||||
zbpSwiper,
|
||||
emptyPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locationArr: ({}),
|
||||
emptyText: '暂无可用应用',
|
||||
jurisdiction: false, // 是否有权限
|
||||
mer_id: '',
|
||||
userInfoData: {
|
||||
mer_info: {
|
||||
type_id: 0
|
||||
}
|
||||
},
|
||||
prefix: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/11/',
|
||||
isShow: false,
|
||||
bgColor: '',
|
||||
isFshow: false,
|
||||
street: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo', 'location', 'isLogin'])
|
||||
},
|
||||
created() {},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.emptyText = '暂无可用应用'
|
||||
this.jurisdiction = false
|
||||
} else {
|
||||
// this.emptyText = '请登录'
|
||||
uni.navigateTo({
|
||||
url:'/pages/users/login/login_copy'
|
||||
})
|
||||
this.jurisdiction = true
|
||||
}
|
||||
this.getUserInfo()
|
||||
this.appLocation()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getUserInfo()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
mounted() {
|
||||
this.appLocation()
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
//获取定位
|
||||
appLocation() {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
timeout: '10',
|
||||
success: (res) => {
|
||||
// console.log(res)
|
||||
|
||||
let latitude, longitude;
|
||||
latitude = res.latitude.toString();
|
||||
longitude = res.longitude.toString();
|
||||
getGeocoder({
|
||||
lat: latitude,
|
||||
long: longitude
|
||||
}).then(res => {
|
||||
this.street = res.data.address_component.street
|
||||
Cache.set('ADRESS_LOCATION', this.street)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
|
||||
// uni.showToast({
|
||||
// title: "获取定位超时",
|
||||
// icon: 'none',
|
||||
// duration: 2000
|
||||
// });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
scrolling() {
|
||||
// 滚动条距文档顶部的距离
|
||||
let scrollTop =
|
||||
window.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
// 滚动条滚动的距离
|
||||
let scrollStep = scrollTop - this.oldScrollTop;
|
||||
console.log("header 滚动距离 ", scrollTop);
|
||||
// 更新——滚动前，滚动条距文档顶部的距离
|
||||
this.oldScrollTop = scrollTop;
|
||||
|
||||
//变量windowHeight是可视区的高度
|
||||
let windowHeight =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
//变量scrollHeight是滚动条的总高度
|
||||
let scrollHeight =
|
||||
document.documentElement.scrollHeight || document.body.scrollHeight;
|
||||
|
||||
//滚动条到底部的条件
|
||||
if (scrollTop + windowHeight == scrollHeight) {
|
||||
//你想做的事情
|
||||
console.log("header 你已经到底部了");
|
||||
}
|
||||
if (scrollStep < 0) {
|
||||
this.isFshow = false
|
||||
console.log("header 滚动条向上滚动了！");
|
||||
} else {
|
||||
this.isFshow = true
|
||||
console.log("header 滚动条向下滚动了！");
|
||||
}
|
||||
// 判断是否到了最顶部
|
||||
if (scrollTop <= 0) {
|
||||
this.isFshow = false
|
||||
console.log("header 到了最顶部")
|
||||
}
|
||||
},
|
||||
|
||||
kkchange(e) {
|
||||
this.bgColor = e
|
||||
},
|
||||
|
||||
navigator(url, t) {
|
||||
// if (this.userInfoData.is_wsxx === 0 && t != '商户设置') return Toast("请完善商户信息");
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
getUserInfo: function() {
|
||||
let that = this;
|
||||
getUserInfo().then(res => {
|
||||
that.userInfoData = res.data;
|
||||
// console.log(res.data.service);
|
||||
if (res.data.service == null) {
|
||||
// console.log('123');
|
||||
this.isShow = false
|
||||
} else {
|
||||
this.isShow = true
|
||||
this.mer_id = res.data.service.mer_id
|
||||
}
|
||||
|
||||
if (!res.data.mer_info) {
|
||||
that.$set(this, 'jurisdiction', false);
|
||||
}
|
||||
// console.log(that.userInfoData);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.gather {
|
||||
padding-bottom: 164.91rpx;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
/* #ifdef MP || APP-PLUS */
|
||||
z-index: -100;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
z-index: -100;
|
||||
/* #endif */
|
||||
z-index: -100;
|
||||
filter: blur(0);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(30rpx);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.site-box {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
margin-bottom: 26.32rpx;
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
padding-top: 30rpx;
|
||||
padding-right: 20rpx;
|
||||
|
||||
// 位置
|
||||
.place_wrapper {
|
||||
color: #fff;
|
||||
margin-right: 24.56rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.town_name {
|
||||
margin-left: 21rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 35.09rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.top_box {
|
||||
// padding-top: 180rpx;
|
||||
background: linear-gradient(#36A2FF, #fff);
|
||||
}
|
||||
|
||||
.com {
|
||||
margin-left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.business {
|
||||
width: 694.74rpx;
|
||||
// margin-bottom: 175rpx;
|
||||
}
|
||||
|
||||
.special_work {
|
||||
// padding: 17.54rpx;
|
||||
width: 694.74rpx;
|
||||
// margin-top: 52.63rpx;
|
||||
padding-top: 32rpx;
|
||||
border-radius: 17.54rpx;
|
||||
// box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
|
||||
|
||||
.title {
|
||||
font-size: 31.58rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 38.6rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
|
||||
.examine {
|
||||
margin-bottom: 35rpx;
|
||||
width: 173.68rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// margin: 0 0 33.33rpx 33.33rpx !important;
|
||||
|
||||
.icon_img {
|
||||
width: 63.16rpx;
|
||||
height: 63.16rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 26.32rpx;
|
||||
margin-top: 21.05rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 29.82rpx;
|
||||
color: #a4a4a4;
|
||||
}
|
||||
}
|
||||
|
||||
.cont_jus {
|
||||
margin-top: 56.14rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:first-child {
|
||||
// margin-right: 33rpx;
|
||||
}
|
||||
|
||||
.examine {
|
||||
margin-right: 48rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class='newsDetail' style="padding-bottom: 50px;">
|
||||
<view class='title'>{{articleInfo.title}}</view>
|
||||
<view class='list acea-row row-middle'>
|
||||
<view class='label'>{{articleInfo.author}}</view>
|
||||
<view class='item'></text>{{articleInfo.create_time}}</view>
|
||||
<!-- <view class='item'><text class='iconfont icon-liulan'></text>{{articleInfo.visit}}</view> -->
|
||||
</view>
|
||||
<view class='conters'>
|
||||
<!-- <rich-text :nodes="content" class="conter"></rich-text> -->
|
||||
<jyf-parser :html="content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
|
||||
</view>
|
||||
<view class="picTxt acea-row row-between-wrapper" v-if="store_info.id">
|
||||
<view class="pictrue">
|
||||
<image :src="store_info.image"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line1">{{store_info.store_name}}</view>
|
||||
<view class="money font-color">
|
||||
￥<text class="num">{{store_info.price}}</text>
|
||||
</view>
|
||||
<view class="y_money">￥{{store_info.ot_price}}</view>
|
||||
</view>
|
||||
<navigator :url="'/pages/goods_details/index?id='+store_info.id" hover-class="none" class="label"><text
|
||||
class="span">查看商品</text></navigator>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<button class="bnt bg-color" hover-class='none' @click="listenerActionSheet">和好友一起分享</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<button class="bnt bg-color" open-type="share" hover-class='none'>和好友一起分享</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<button class="bnt bg-color" open-type="share" hover-class='none' @click="uniShare">分享</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<shareInfo @setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></shareInfo>
|
||||
<!-- <home></home> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import parser from "@/components/jyf-parser/jyf-parser";
|
||||
import {
|
||||
getArticleDetails
|
||||
} from '@/api/api.js';
|
||||
import shareInfo from '@/components/shareInfo';
|
||||
import home from '@/components/home';
|
||||
import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
|
||||
const uniShare = new UniShare();
|
||||
export default {
|
||||
components: {
|
||||
shareInfo,
|
||||
home,
|
||||
"jyf-parser": parser,
|
||||
},
|
||||
onBackPress({
|
||||
from
|
||||
}) {
|
||||
if (from == 'backbutton') {
|
||||
this.$nextTick(function() {
|
||||
uniShare.hide()
|
||||
})
|
||||
return uniShare.isShow;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
articleInfo: [],
|
||||
store_info: {},
|
||||
content: '',
|
||||
shareInfoStatus: false,
|
||||
tagStyle: {
|
||||
img: 'width:100%;display:block;'
|
||||
},
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
if (options.hasOwnProperty('id')) {
|
||||
this.id = options.id;
|
||||
} else {
|
||||
// #ifndef H5
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
history.back();
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
onShow: function() {
|
||||
this.getArticleOne();
|
||||
},
|
||||
methods: {
|
||||
// 分享
|
||||
uniShare() {
|
||||
uniShare.show({
|
||||
content: { //公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
|
||||
type: 0,
|
||||
href: 'https://uniapp.dcloud.io/',
|
||||
title: '标题',
|
||||
summary: '描述',
|
||||
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
|
||||
},
|
||||
menus: [{
|
||||
"img": "/static/images/weixin.png",
|
||||
"text": "微信好友",
|
||||
"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneSession"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/images/weixin.png",
|
||||
"text": "微信朋友圈",
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneTimeline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/images/weixin.png",
|
||||
"text": "微信小程序",
|
||||
"share": {
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
miniProgram: {
|
||||
id: '123',
|
||||
path: '/pages/list/detail',
|
||||
webUrl: '/#/pages/list/detail',
|
||||
type: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
// {
|
||||
// "img": "/static/app-plus/sharemenu/weibo.png",
|
||||
// "text": "微博",
|
||||
// "share": {
|
||||
// "provider": "sinaweibo"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "img": "/static/app-plus/sharemenu/qq.png",
|
||||
// "text": "QQ",
|
||||
// "share": {
|
||||
// "provider": "qq"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "img": "/static/app-plus/sharemenu/copyurl.png",
|
||||
// "text": "复制",
|
||||
// "share": "copyurl"
|
||||
// },
|
||||
// {
|
||||
// "img": "/static/app-plus/sharemenu/more.png",
|
||||
// "text": "更多",
|
||||
// "share": "shareSystem"
|
||||
// }
|
||||
],
|
||||
cancelText: "取消分享",
|
||||
}, e => { //callback
|
||||
console.log(uniShare.isShow);
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
getArticleOne: function() {
|
||||
let that = this;
|
||||
getArticleDetails(that.id).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.data.title.substring(0, 7) + "..."
|
||||
});
|
||||
that.$set(that, 'articleInfo', res.data);
|
||||
that.$set(that, 'store_info', res.data.store_info ? res.data.store_info : {});
|
||||
that.content = res.data.content.content;
|
||||
// #ifdef H5
|
||||
if (this.$wechat.isWeixin()) {
|
||||
this.setShareInfo();
|
||||
}
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
listenerActionSheet() {
|
||||
this.shareInfoStatus = true
|
||||
},
|
||||
setShareInfoStatus() {
|
||||
this.shareInfoStatus = false
|
||||
},
|
||||
setShareInfo: function() {
|
||||
let href = location.href;
|
||||
let configAppMessage = {
|
||||
desc: this.articleInfo.synopsis,
|
||||
title: this.articleInfo.title,
|
||||
link: href,
|
||||
imgUrl: this.articleInfo.image_input
|
||||
};
|
||||
this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"], configAppMessage);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.newsDetail .title {
|
||||
padding: 0 30rpx;
|
||||
font-size: 34rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
margin: 45rpx 0 23rpx 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.newsDetail .list {
|
||||
margin: 0 30rpx;
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.newsDetail .list .label {
|
||||
font-size: 30rpx;
|
||||
color: #B1B2B3;
|
||||
}
|
||||
|
||||
.newsDetail .list .item {
|
||||
margin-left: 27rpx;
|
||||
font-size: 30rpx;
|
||||
color: #B1B2B3;
|
||||
}
|
||||
|
||||
.newsDetail .list .item .iconfont {
|
||||
font-size: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.newsDetail .list .item .iconfont.icon-shenhezhong {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.newsDetail .conters {
|
||||
padding: 0 30rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 1.7;
|
||||
|
||||
/deep/ img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.newsDetail .picTxt {
|
||||
width: 690rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #e1e1e1;
|
||||
position: relative;
|
||||
margin: 30rpx auto 0 auto;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .pictrue {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .text {
|
||||
width: 460rpx;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .text .name {
|
||||
font-size: 30rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .text .money {
|
||||
font-size: 24rpx;
|
||||
margin-top: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .text .money .num {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .text .y_money {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .label {
|
||||
position: absolute;
|
||||
background-color: #303131;
|
||||
width: 160rpx;
|
||||
height: 50rpx;
|
||||
right: -7rpx;
|
||||
border-radius: 25rpx 0 6rpx 25rpx;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
bottom: 24rpx;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .label .span {
|
||||
background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.newsDetail .picTxt .label:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 8rpx solid #303131;
|
||||
border-right: 8rpx solid transparent;
|
||||
top: -7rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.newsDetail .bnt {
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
width: 690rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
margin: 48rpx auto;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class='newsList'>
|
||||
<view class='swiper' v-if="imgUrls.length > 0">
|
||||
<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(102,102,102,0.3)" indicator-active-color="#666">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item>
|
||||
<navigator :url="'/pages/news_details/index?id='+item.id">
|
||||
<image :src="item.image_input[0]" class="slide-image" />
|
||||
</navigator>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class='nav' v-if="navList.length > 0">
|
||||
<scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft"
|
||||
style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in navList" :key="index">
|
||||
<view class='item' style="text-align: center;" :class='active==item.article_category_id?"on":""'
|
||||
@click='tabSelect(item.article_category_id)'>
|
||||
<view>{{item.title}}</view>
|
||||
<view class='line bg-color' v-if="active==item.article_category_id"></view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class='list'>
|
||||
<block v-for="(item,index) in articleList" :key="index">
|
||||
<navigator :url='"/pages/news_details/index?id="+item.article_id' hover-class='none'
|
||||
class='item acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-column-between'>
|
||||
<view class='name line2'>{{item.title}}</view>
|
||||
<view>{{item.create_time}}</view>
|
||||
</view>
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image_input'></image>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='empty-box acea-row row-middle' v-if="articleList.length == 0 && (page != 1 || active== 0)">
|
||||
<view class='pictrue'>
|
||||
<image src='../../static/images/empty-box.png'></image>
|
||||
<view class="txt">暂无新闻信息~</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <home></home> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {
|
||||
getArticleCategoryLists,
|
||||
getArticleCategoryList,
|
||||
getArticleList,
|
||||
getArticleHotList,
|
||||
getArticleBannerList
|
||||
} from '@/api/api.js';
|
||||
import home from '@/components/home';
|
||||
export default {
|
||||
components: {
|
||||
home
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgUrls: [],
|
||||
articleList: [],
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
navList: [],
|
||||
active: 0,
|
||||
page: 1,
|
||||
limit: 8,
|
||||
status: false,
|
||||
scrollLeft: 0,
|
||||
type: 0
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function() {},
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onLoad: function(e) {
|
||||
|
||||
this.type = e.type
|
||||
this.getArticleCate();
|
||||
this.status = false;
|
||||
this.page = 1;
|
||||
this.articleList = [];
|
||||
},
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
this.getCidArticle();
|
||||
},
|
||||
methods: {
|
||||
getArticleHot: function() {
|
||||
let that = this;
|
||||
getArticleHotList().then(res => {
|
||||
that.$set(that, 'articleList', res.data);
|
||||
});
|
||||
},
|
||||
getArticleBanner: function() {
|
||||
let that = this;
|
||||
getArticleBannerList().then(res => {
|
||||
that.imgUrls = res.data;
|
||||
});
|
||||
},
|
||||
getCidArticle: function() {
|
||||
let that = this;
|
||||
if (that.active == 0) return;
|
||||
let limit = that.limit;
|
||||
let page = that.page;
|
||||
let articleList = that.articleList;
|
||||
if (that.status) return;
|
||||
getArticleList(that.active, {
|
||||
page: page,
|
||||
limit: limit
|
||||
}).then(res => {
|
||||
let articleListNew = [];
|
||||
let len = res.length;
|
||||
articleListNew = articleList.concat(res.data.list);
|
||||
that.page++;
|
||||
that.$set(that, 'articleList', articleListNew);
|
||||
that.status = limit > len;
|
||||
that.page = that.page;
|
||||
});
|
||||
},
|
||||
getArticleCate: function() {
|
||||
let that = this;
|
||||
if (this.type == 1) {
|
||||
getArticleCategoryLists().then(res => {
|
||||
this.active = res.data[0].article_category_id
|
||||
that.$set(that, 'navList', res.data);
|
||||
this.getCidArticle();
|
||||
});
|
||||
} else {
|
||||
getArticleCategoryList().then(res => {
|
||||
this.active = res.data[0].article_category_id
|
||||
that.$set(that, 'navList', res.data);
|
||||
this.getCidArticle();
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
tabSelect(active) {
|
||||
this.active = active;
|
||||
if (this.active == 0) this.getArticleHot();
|
||||
else {
|
||||
this.$set(this, 'articleList', []);
|
||||
this.page = 1;
|
||||
this.status = false;
|
||||
this.getCidArticle();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.newsList .swiper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.newsList .swiper swiper {
|
||||
width: 100%;
|
||||
height: 365rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.newsList .swiper .slide-image {
|
||||
width: 100%;
|
||||
height: 335rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
.newsList .swiper .wx-swiper-dot {
|
||||
width: 12rpx !important;
|
||||
height: 12rpx !important;
|
||||
border-radius: 0;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.newsList .swiper .wx-swiper-dot~.wx-swiper-dot {
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.newsList .swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
|
||||
margin-bottom: -15rpx;
|
||||
}
|
||||
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || H5
|
||||
.newsList .swiper .uni-swiper-dot {
|
||||
width: 12rpx !important;
|
||||
height: 12rpx !important;
|
||||
border-radius: 0;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.newsList .swiper .uni-swiper-dot~.uni-swiper-dot {
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.newsList .swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
|
||||
margin-bottom: -15rpx;
|
||||
}
|
||||
|
||||
// #endif
|
||||
.newsList .nav {
|
||||
padding: 0 30rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
margin-top: 43rpx;
|
||||
}
|
||||
|
||||
.newsList .nav .item {
|
||||
display: inline-block;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
min-width: 130rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.newsList .nav .item.on {
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.newsList .nav .item~.item {
|
||||
margin-left: 46rpx;
|
||||
}
|
||||
|
||||
.newsList .nav .item .line {
|
||||
width: 24rpx;
|
||||
height: 4rpx;
|
||||
border-radius: 2rpx;
|
||||
margin: 10rpx auto 0 auto;
|
||||
position: absolute;
|
||||
bottom: 5rpx;
|
||||
left: 50%;
|
||||
margin-left: -12rpx;
|
||||
}
|
||||
|
||||
.newsList .list .item {
|
||||
margin: 0 30rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 35rpx 0;
|
||||
}
|
||||
|
||||
.newsList .list .item .pictrue {
|
||||
width: 250rpx;
|
||||
height: 156rpx;
|
||||
}
|
||||
|
||||
.newsList .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.newsList .list .item .text {
|
||||
width: 420rpx;
|
||||
height: 156rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.newsList .list .item .text .name {
|
||||
font-size: 30rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.newsList .list .item .picList .pictrue {
|
||||
width: 335rpx;
|
||||
height: 210rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.newsList .list .item .picList.on .pictrue {
|
||||
width: 217rpx;
|
||||
height: 136rpx;
|
||||
}
|
||||
|
||||
.newsList .list .item .picList .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.newsList .list .item .time {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 200rpx;
|
||||
|
||||
image {
|
||||
width: 414rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<u-popup :show="goodsStatu" mode="bottom" :closeOnClickOverlay="false">
|
||||
<view class="goodsPopup">
|
||||
<view class="close" @click="colse">关闭</view>
|
||||
<view class="container">
|
||||
<!-- <image src="" /> -->
|
||||
<view class="content">
|
||||
<view class="image">
|
||||
<image :src="info.image" />
|
||||
</view>
|
||||
<view class="content_info">
|
||||
<view>{{ info.store_name }}</view>
|
||||
<view>￥:{{ info.price * info.num }}</view>
|
||||
<view>库存:{{ info.stock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods_num">
|
||||
<view>数量</view>
|
||||
<view class="shop_num">
|
||||
<view class="shop_box" @click="addor(-1)">-</view>
|
||||
<view class="num">{{ info.num }}</view>
|
||||
<view class="shop_box" @click="addor(+1)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopgo" @click="handel">添加到购物车</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
goodsStatu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//商品参数
|
||||
goods_info: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: this.goods_info,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
addor(item, index) {
|
||||
this.info.num += item;
|
||||
if (this.info.num <= 0) {
|
||||
// console.log(goods_info);
|
||||
this.info.num = 1;
|
||||
}
|
||||
},
|
||||
// 返回修改过后的商品参数给父组件
|
||||
handel() {
|
||||
this.$emit("change", this.info);
|
||||
},
|
||||
colse() {
|
||||
this.$emit("colses", true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goodsPopup {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 30vh;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
|
||||
.image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content_info :nth-child(1) {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.content_info :nth-child(2) {
|
||||
font-size: 32rpx;
|
||||
color: #fe9a10;
|
||||
}
|
||||
|
||||
.content_info :nth-child(3) {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.goods_num {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
|
||||
.shop_num {
|
||||
display: flex;
|
||||
|
||||
>view {
|
||||
width: 80rpx;
|
||||
height: 40rpx;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.num {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopgo {
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 200rpx;
|
||||
background: red;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,387 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="head">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<!-- <u--image style="position: absolute;" :showLoading="true" src="/static/images/MYTC/BG.png" width="750rpx"
|
||||
height="748.25rpx" @click="click"></u--image> -->
|
||||
<view class="head_tit">
|
||||
<view class="head_tit_l">
|
||||
<view class="iconfont icon-xiangzuo"></view>
|
||||
<view style="font-size: 40rpx;font-weight: 700;margin-left: 30rpx; transform: skewX(-10deg);">
|
||||
当地美食
|
||||
</view>
|
||||
</view>
|
||||
<view class="head_tit_r" style="font-size: 29.79rpx;">
|
||||
江阳区 <text style="margin-left: 10rpx;" class="iconfont icon-xiangxia"></text>
|
||||
<view class="" style="font-size: 22.78rpx;">
|
||||
晴天30℃
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="head_serch">
|
||||
<view style="position: relative;">
|
||||
<u-search borderColor="#FF6D20" bgColor="white" :showAction="false" placeholder="搜索店铺名称"
|
||||
v-model="keyword" class="serch_cls"></u-search>
|
||||
<u--image @tap="searchSubmit" class="img_cls" :showLoading="true" src="/static/images/GXSC/SS.png"
|
||||
width="115.65rpx" height="56.82rpx"></u--image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="foodType">
|
||||
<view class="foodLi" v-for="(item,index) in lists" :key="index">
|
||||
<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="70rpx"
|
||||
height="70rpx"></u--image>
|
||||
<view class="" style="text-align: center;">
|
||||
早餐
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 餐厅 -->
|
||||
<view>
|
||||
<u-tabs :list="list1" :activeStyle="{
|
||||
color: '#303133',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}" lineColor="#FF6D20" lineWidth='60'></u-tabs>
|
||||
</view>
|
||||
<!-- 分类 -->
|
||||
|
||||
<view class="display_around">
|
||||
<view class="">
|
||||
全部美食
|
||||
</view>
|
||||
<view class="">
|
||||
附近
|
||||
</view>
|
||||
<view class="">
|
||||
智能排序
|
||||
</view>
|
||||
<view class="">
|
||||
筛选
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="display_around hot_serch">
|
||||
<view class="hot_serch_li" v-for="item,index in [1,1,1,1]" :key="index">
|
||||
泸州万达
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 20rpx;">
|
||||
<view class="store" style="background-color: white;">
|
||||
<view class="goods_list">
|
||||
<view class="goods_cards" @click="goStore(item.mer_id)" v-for="(item,index) in storeList"
|
||||
:key="index">
|
||||
<view class="left">
|
||||
<u--image :showLoading="true" :src="item.mer_avatar" width="157.71rpx"
|
||||
height="157.71rpx"></u--image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="li heads" style="display: flex;">
|
||||
<text class="com_name">{{item.mer_name}}</text>
|
||||
<text
|
||||
style="font-weight: normal; font-size: 10rpx;color: #737373;padding:0 10rpx; border-radius: 10rpx; border: 1px solid #737373;">{{item.type_name}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<u--image v-for="item,index in [1,1,,1,1,1]" :key="index" :showLoading="true"
|
||||
src="/static/images/GXSC/PF.png" width="20.85rpx" height="19.85rpx"></u--image>
|
||||
<text style="margin-left:10rpx;color: #FF6D20; ">5.0</text>
|
||||
<text>￥80/人</text>
|
||||
<text>20分钟</text>
|
||||
<text>1.1km</text>
|
||||
|
||||
</view>
|
||||
<view class="li" style="align-items: center;">
|
||||
<u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx"
|
||||
height="33.85rpx"></u--image>
|
||||
<text> {{item.service_phone}}</text>
|
||||
</view>
|
||||
<view class="li" style="align-items: center;">
|
||||
<u--image :showLoading="true" src="/static/images/GXSC/SJ.png" width="33.85rpx"
|
||||
height="33.85rpx"></u--image>
|
||||
<text>{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}</text>
|
||||
</view>
|
||||
<view class="li" style="align-items: center;">
|
||||
<u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx"
|
||||
height="33.85rpx"></u--image>
|
||||
<text class="address">{{item.mer_address}}</text>
|
||||
</view>
|
||||
<u-line color="#B3B3B3"></u-line>
|
||||
|
||||
<view class="package display_around" v-for="item,index in [1,1,1]" :key="index">
|
||||
<text class="hui">惠</text>
|
||||
<text class="price">￥100</text>
|
||||
<text class="sale">6.9折</text>
|
||||
<text style="text-decoration: line-through;color: #B3B3B3;">￥100</text>
|
||||
<text>究极套餐</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
storeMerchantList,
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
list: [1, 1, 1, 11, 1, 11, 11],
|
||||
lists: [1, 1, 1, 1, 1],
|
||||
storeList: [1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
list1: [{
|
||||
name: "美食餐厅"
|
||||
}, {
|
||||
name: "聚餐宴请"
|
||||
}, {
|
||||
name: "单人餐"
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
onLaunch() {
|
||||
console.log(46545)
|
||||
// storeMerchantList().then(res => {
|
||||
// // this.count = res.data.count
|
||||
// // this.storeList = this.storeList.concat(res.data.list)
|
||||
// // this.loading = false
|
||||
// // this.loadingIcon = false
|
||||
// console.log(res)
|
||||
// })
|
||||
|
||||
},
|
||||
onShow() {
|
||||
// console.log(46545)
|
||||
storeMerchantList().then(res => {
|
||||
// this.count = res.data.count
|
||||
this.storeList = res.data.list
|
||||
// this.loading = false
|
||||
// this.loadingIcon = false
|
||||
// console.log(res)
|
||||
})
|
||||
},
|
||||
methods: {},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.head {
|
||||
// background-color: #F94621;
|
||||
// background: url('/static/images/MYTC/BG.png') no-repeat;
|
||||
padding: 20rpx;
|
||||
border-radius: 0rpx 0rpx 31.54rpx 31.54rpx;
|
||||
|
||||
.head_tit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// color: white;
|
||||
// margin-bottom: 20rpx;
|
||||
|
||||
.head_tit_l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.head_tit_r {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.head_serch {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.foodType {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #fff;
|
||||
padding: 21rpx 38rpx;
|
||||
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
|
||||
|
||||
.foodLi {}
|
||||
}
|
||||
|
||||
|
||||
.head_content {
|
||||
.head_content_card {
|
||||
background: linear-gradient(to bottom, #FCB9AD, #FFFBF9, #FFFFFF);
|
||||
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
|
||||
overflow: hidden;
|
||||
padding: 20rpx 10rpx;
|
||||
|
||||
.goods_card {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods_tit {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.goods_price {
|
||||
color: #F84221;
|
||||
font-size: 29.79rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot_serch {
|
||||
margin: 20rpx;
|
||||
|
||||
.hot_serch_li {
|
||||
background-color: white;
|
||||
padding: 8rpx 22rpx;
|
||||
border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store {
|
||||
|
||||
.goods_list {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.goods_cards {
|
||||
margin-top: 20rpx;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
|
||||
.left {
|
||||
margin-right: 20rpx;
|
||||
width: 158rpx;
|
||||
height: 158rpx;
|
||||
// background-color: red;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right {
|
||||
// box-sizing: border-box;
|
||||
width: 75vw;
|
||||
overflow: hidden;
|
||||
// background-color: red;
|
||||
|
||||
.heads {
|
||||
font-weight: bold;
|
||||
|
||||
.flag {
|
||||
background: linear-gradient(to bottom, #F84221, #FF6D20);
|
||||
width: 66.59rpx;
|
||||
height: 36.8rpx;
|
||||
text-align: center;
|
||||
font-size: 22.78rpx;
|
||||
color: white;
|
||||
border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.goods_card_a {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods_price_a {
|
||||
color: #F84221;
|
||||
}
|
||||
|
||||
.goods_tit_a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.li {
|
||||
display: flex;
|
||||
font-size: 26.29rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
align-items: center;
|
||||
color: #737373;
|
||||
|
||||
text {
|
||||
margin: 0 10rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.package {
|
||||
margin-top: 30rpx;
|
||||
align-items: center;
|
||||
|
||||
.hui {
|
||||
border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
|
||||
background-color: #FEEBE7;
|
||||
color: #F84221;
|
||||
font-size: 22.78rpx;
|
||||
// padding: 5rpx;
|
||||
width: 36rpx;
|
||||
height: 35rpx;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #F84221;
|
||||
font-size: 36.8rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sale {
|
||||
width: 77.1rpx;
|
||||
height: 44rpx;
|
||||
background-color: white;
|
||||
color: #F84221;
|
||||
border: 1px solid #F84221;
|
||||
border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
|
||||
font-size: 22.78rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.img_cls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 7rpx;
|
||||
transform: translateY(-50%);
|
||||
|
||||
}
|
||||
|
||||
.display_around {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,737 @@
|
|||
<template>
|
||||
<view class="select_warehouse">
|
||||
<view class="wrapper flex_a_c_j_sb">
|
||||
<block v-for="item in goodsData" :key="item.name">
|
||||
<view class="select_item" @click="navigato(item.type)"
|
||||
:style="{'background-image': `url(${item.src})`}">
|
||||
<view class="title">{{ item.name }}</view>
|
||||
<view class="iconfont icon-jiantou"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="list-box listA" :class="goods.length > 0 ? 'fadeIn on' : ''">
|
||||
<view class="item" v-for="(item, index) in goods" :key="index">
|
||||
<view class="pictrue">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
<view class="text-info">
|
||||
<view class="title">{{ item.store_name }}</view>
|
||||
<view class="price">¥<text>{{ item.price }}</text></view>
|
||||
<view class="add-btn" @click="addGoods(item)">加入仓库</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="editGoodsShow" @close="editGoodsClose" :round="18" mode="center">
|
||||
<view class="edit_goods_box">
|
||||
<view class="edit_name flex_a_c edit_name_no">
|
||||
<text>商品编号：</text><input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsCode">
|
||||
</view>
|
||||
<view class="edit_name flex_a_c edit_name_no">
|
||||
<text>商品名称：</text> <input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsName">
|
||||
</view>
|
||||
<view class="edit_name flex_a_c">
|
||||
编辑商品价格：<input type="text" placeholder="请输入商品名称" v-model="editGoodsPrice">
|
||||
</view>
|
||||
<view class="edit_store flex_a_c">
|
||||
编辑商品库存：<input type="text" placeholder="请输入库存" v-model="editGoodsStore">
|
||||
</view>
|
||||
<view class="edit_goods_btn">
|
||||
<u-button type="error" text="取消" class="edit_btn" @click="editGoodsShow=false">
|
||||
</u-button>
|
||||
<u-button type="primary" text="保存" class="edit_btn" @click="editGoodsClose">
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-modal :show="addGoodsShow" content='是否添加到你的仓库中?' @cancel="addGoodsclose()" @close="addGoodsclose()"
|
||||
@confirm="addGoodsopen()" :closeOnClickOverlay="true" :showCancelButton="true"></u-modal>
|
||||
<u-popup :show="searchGoodsShow" @close="searchGoodsClose" :round="18" mode="center">
|
||||
<view class="search_goods_box">
|
||||
<input type="text" v-model="searchGoodsName" class="searchGoods" placeholder="请输入商品名称">
|
||||
<view class="search_goods_btn">
|
||||
<view class="cancel edit_btn" @click="searchGoodsShow=false">取消</view>
|
||||
<view class="search edit_btn" @click="searchGoodsClose">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
productCreate
|
||||
} from '@/api/product.js'
|
||||
import {
|
||||
microSeachBarCode,
|
||||
microEadtProduct
|
||||
} from '@/api/store.js'
|
||||
import {
|
||||
seachBarCodeAPI,
|
||||
post_product_import
|
||||
} from '@/api/api.js'
|
||||
import {
|
||||
Toast
|
||||
} from '@/libs/uniApi'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsData: [{
|
||||
name: '',
|
||||
type: 1,
|
||||
src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/mingcheng.png'
|
||||
},
|
||||
{
|
||||
name: '扫码入库',
|
||||
type: 2,
|
||||
src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png'
|
||||
}
|
||||
],
|
||||
product_id: '',
|
||||
editGoodsCode: '',
|
||||
editGoodsName: '',
|
||||
editGoodsPrice: '',
|
||||
editGoodsStore: '',
|
||||
editGoodsShow: false, // 扫码修改商品信息
|
||||
mer_id: 0,
|
||||
searchGoodsShow: false,
|
||||
searchGoodsName: '',
|
||||
goods: [],
|
||||
item: [],
|
||||
addGoodsShow: false,
|
||||
stype: '',
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.mer_id = e.mer_id
|
||||
this.stype = e.stype
|
||||
if (this.stype == 1) {
|
||||
return this.goodsData[0].name = '商品添加'
|
||||
}
|
||||
if (this.stype == 2) {
|
||||
return this.goodsData[0].name = '商品名称添加'
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
addGoods(item) {
|
||||
this.addGoodsShow = true
|
||||
this.item = item
|
||||
},
|
||||
addGoodsopen() {
|
||||
if (this.item) {
|
||||
post_product_import(this.item.product_id).then(e => {
|
||||
if (e.status == 200) {
|
||||
Toast(e.data.msg)
|
||||
this.addGoodsShow = false
|
||||
} else {
|
||||
// console.log(e);
|
||||
Toast(e.message)
|
||||
this.addGoodsShow = false
|
||||
}
|
||||
}).catch(err => {
|
||||
// console.log(err);
|
||||
if (err == "已经导入过该商品了") {
|
||||
Toast('已经导入过该商品了')
|
||||
this.addGoodsShow = false
|
||||
} else {
|
||||
Toast('导入出错')
|
||||
this.addGoodsShow = false
|
||||
}
|
||||
})
|
||||
}
|
||||
this.item = []
|
||||
},
|
||||
addGoodsclose() {
|
||||
this.addGoodsShow = false
|
||||
},
|
||||
openSearch() {},
|
||||
async searchGoodsClose() {
|
||||
const rq = {
|
||||
mer_id: this.mer_id,
|
||||
name: this.searchGoodsName
|
||||
}
|
||||
const {
|
||||
data
|
||||
} = await seachBarCodeAPI(rq).catch(err => Toast(err))
|
||||
if (data.list.length < 1) {
|
||||
this.searchGoodsShow = false
|
||||
Toast("暂无搜索商品,请添加！")
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/addGoods/index?mer_id=${rq.mer_id}`
|
||||
})
|
||||
}, 2000)
|
||||
return
|
||||
}
|
||||
this.goods = data.list
|
||||
this.searchGoodsShow = false
|
||||
},
|
||||
async editGoodsClose() {
|
||||
const data = {
|
||||
price: this.editGoodsPrice,
|
||||
stock: this.editGoodsStore,
|
||||
id: this.product_id
|
||||
}
|
||||
try {
|
||||
const res = await microEadtProduct(data)
|
||||
Toast("更新成功")
|
||||
this.editGoodsShow = false
|
||||
} catch (e) {
|
||||
Toast("更新失败")
|
||||
this.editGoodsShow = false
|
||||
}
|
||||
},
|
||||
navigato(type) {
|
||||
if (type === 1) {
|
||||
if (this.stype == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/addGoods/index?mer_id=${this.mer_id}`
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.searchGoodsShow = true
|
||||
} else {
|
||||
this.scanCode();
|
||||
}
|
||||
},
|
||||
scanCode() {
|
||||
const self = this
|
||||
uni.scanCode({
|
||||
scanType: ["qrCode", "barCode", "datamatrix", "pdf417"],
|
||||
success(res) {
|
||||
if (self.stype == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/addGoods/index?mer_id=${self.mer_id}&code=${res.result}`
|
||||
})
|
||||
} else {
|
||||
self.seachBarCode(res.result)
|
||||
}
|
||||
|
||||
},
|
||||
fail(res) {
|
||||
// console.log(res);
|
||||
},
|
||||
})
|
||||
},
|
||||
async seachBarCode(code) {
|
||||
await seachBarCodeAPI({
|
||||
code: code,
|
||||
mer_id: this.mer_id
|
||||
}).then(res => {
|
||||
if (!res.data) {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
});
|
||||
} else {
|
||||
if (res.data.list.length < 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/addGoods/index?mer_id=${this.mer_id}&code=${code}`
|
||||
})
|
||||
return
|
||||
}
|
||||
this.goods = res.data.list
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.select_warehouse {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 694.74rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.goods-wrapper {
|
||||
.item {
|
||||
display: flex;
|
||||
height: 175.44rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin-top: 21.05rpx;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
.l_cont {
|
||||
image {
|
||||
width: 133.33rpx;
|
||||
height: 133.33rpx;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.r_cont {
|
||||
margin-left: 17.54rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select_item {
|
||||
width: 336.84rpx;
|
||||
height: 189.47rpx;
|
||||
border-radius: 8px;
|
||||
background-color: #eee;
|
||||
padding: 35.09rpx 28.07rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.title {
|
||||
font-size: 35.09rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search_goods_box {
|
||||
width: 694.74rpx;
|
||||
padding: 28.07rpx;
|
||||
font-size: 31.58rpx;
|
||||
|
||||
.searchGoods {
|
||||
height: 87.72rpx;
|
||||
border: 1px solid #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 21.05rpx 0;
|
||||
}
|
||||
|
||||
.search_goods_btn {
|
||||
margin-top: 28.07rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.edit_btn {
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
line-height: 70.18rpx;
|
||||
height: 70.18rpx;
|
||||
width: 210.53rpx;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background-color: $u-error;
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: $u-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 扫码编辑商品
|
||||
.edit_goods_box {
|
||||
width: 694.74rpx;
|
||||
padding: 28.07rpx;
|
||||
font-size: 31.58rpx;
|
||||
|
||||
text {
|
||||
color: '#f8f9f9';
|
||||
}
|
||||
|
||||
.edit_name,
|
||||
.edit_store {
|
||||
height: 105.26rpx;
|
||||
}
|
||||
|
||||
.edit_name_no {
|
||||
color: #a4a4a4;
|
||||
}
|
||||
|
||||
.edit_store {
|
||||
// border-top: 1px solid #a4a4a4;
|
||||
margin-top: 21.05rpx;
|
||||
}
|
||||
|
||||
/deep/.u-button {
|
||||
width: 300rpx;
|
||||
}
|
||||
|
||||
.edit_goods_btn {
|
||||
margin-top: 28.07rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.edit_btn {
|
||||
width: 210.53rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 28rpx 0;
|
||||
|
||||
.item {
|
||||
width: 328rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
|
||||
&.on {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.pictrue_log {
|
||||
width: 92rpx;
|
||||
height: 44rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.pictrue,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.picture1,
|
||||
/deep/.picture1 image,
|
||||
/deep/.picture1 .easy-loadimage,
|
||||
/deep/.picture1 uni-image {
|
||||
height: 346rpx;
|
||||
position: relative;
|
||||
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
|
||||
.sell_out {
|
||||
display: flex;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -75rpx 0 0 -75rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 100%;
|
||||
border: 1px dashed #fff;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cont1,
|
||||
/deep/.cont1 image,
|
||||
/deep/.cont1 .easy-loadimage,
|
||||
/deep/.cont1 uni-image,
|
||||
.cont1 .border-picture {
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
padding: 10rpx 20rpx 15rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-btn {
|
||||
align-self: flex-end;
|
||||
text-align: center;
|
||||
width: 175.44rpx;
|
||||
color: #fff;
|
||||
margin-top: auto;
|
||||
padding: 7.02rpx 21.05rpx;
|
||||
border-radius: 100px;
|
||||
background: $uni-theme-bg-color;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 31.58rpx;
|
||||
margin-bottom: 10.53rpx;
|
||||
color: #222222;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.old-price {
|
||||
margin-top: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
|
||||
text {
|
||||
margin-right: 2px;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.ot-price {
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
text-decoration: line-through;
|
||||
margin-left: 6rpx;
|
||||
font-weight: normal;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pictrue {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
background: center/cover no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.merchant_info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.merchant_type {
|
||||
color: #fff;
|
||||
line-height: 30rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 2rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 15rpx;
|
||||
border: 1px solid $theme-color;
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
|
||||
&.delivery {
|
||||
margin-left: 0;
|
||||
color: #FF9000;
|
||||
border-color: #FF9000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.on {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.listA {
|
||||
.item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.pictrue,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.sell_out {
|
||||
display: flex;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -55rpx 0 0 -55rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100%;
|
||||
border: 1px dashed #fff;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-info {
|
||||
width: 490rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.listB {
|
||||
justify-content: inherit;
|
||||
|
||||
.item {
|
||||
width: 31.3%;
|
||||
margin-right: 3.05%;
|
||||
|
||||
.pictrue,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.sell_out {
|
||||
display: flex;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -55rpx 0 0 -55rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100%;
|
||||
border: 1px dashed #fff;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-info {
|
||||
padding: 10rpx 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.listC {
|
||||
.item {
|
||||
width: 100%;
|
||||
|
||||
.pictrue,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 20rpx;
|
||||
font-size: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.old-price {
|
||||
font-weight: normal;
|
||||
font-size: 22rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.listS {
|
||||
.price {
|
||||
font-size: 40rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.old-price {
|
||||
font-weight: normal;
|
||||
font-size: 22rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,324 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="head">
|
||||
<view style="height: var(--status-bar-height);"></view>
|
||||
<!-- <u--image style="position: absolute;" :showLoading="true" src="/static/images/MYTC/BG.png" width="750rpx"
|
||||
height="748.25rpx" @click="click"></u--image> -->
|
||||
<view class="head_tit">
|
||||
<view class="head_tit_l">
|
||||
<view class="iconfont icon-xiangzuo"></view>
|
||||
<view
|
||||
style="font-size: 40rpx;font-weight: 700;margin-left: 30rpx; transform: skewX(-10deg);color:white;">
|
||||
名优特产
|
||||
</view>
|
||||
</view>
|
||||
<view class="head_tit_r" style="font-size: 29.79rpx;">
|
||||
江阳区 <text style="margin-left: 10rpx;" class="iconfont icon-xiangxia"></text>
|
||||
<view class="" style="font-size: 22.78rpx;">
|
||||
晴天30℃
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="head_serch">
|
||||
<view style="position: relative;">
|
||||
<!-- <u-search borderColor="#FF6D20" bgColor="white" :showAction="false" placeholder="搜索店铺名称"
|
||||
v-model="keyword" class="serch_cls"></u-search> -->
|
||||
<!-- <u--image class="img_cls" style="position: absolute; top: 3px;right: 3px;" :showLoading="true"
|
||||
src="/static/images/MYTC/SS.png" width="115.65rpx" height="56.82rpx"></u--image> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="head_content">
|
||||
<view style="font-size: 40rpx;font-weight: 700;color:white; margin-bottom: 10rpx;">
|
||||
精选特产
|
||||
</view>
|
||||
<view class="head_content_card">
|
||||
|
||||
<u-scroll-list>
|
||||
<view v-for="(item, index) in list" :key="index" class="goods_card">
|
||||
<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg"
|
||||
width="210.28rpx" height="210.28rpx"></u--image>
|
||||
<view class="goods_tit">
|
||||
笑口常开地方就是的开发建设的开发建设的,v空间和客户可怜见立刻就
|
||||
</view>
|
||||
<view class="goods_price">
|
||||
￥ 10.00
|
||||
</view>
|
||||
|
||||
<!-- <image :src="item.thumb"></image> -->
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store" style="background-color: white;">
|
||||
<view class="goods_list">
|
||||
<view class="goods_cards" @click="goStore(item.mer_id)" v-for="(item,index) in storeList" :key="index">
|
||||
<view class="left">
|
||||
<u--image :showLoading="true" :src="item.mer_avatar" width="157.71rpx"
|
||||
height="157.71rpx"></u--image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="li heads" style="display: flex;">
|
||||
<text class="flag">特产</text>
|
||||
<text class="com_name">{{item.mer_name}}</text>
|
||||
<text
|
||||
style="font-weight: normal; font-size: 10rpx;color: #737373;padding:0 10rpx; border-radius: 10rpx; border: 1px solid #737373;">{{item.type_name}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<u--image v-for="item,index in [1,1,,1,1,1]" :key="index" :showLoading="true"
|
||||
src="/static/images/GXSC/PF.png" width="20.85rpx" height="19.85rpx"></u--image>
|
||||
<text style="margin-left: 10rpx;color: #FF6D20; ">5.0</text>
|
||||
<text>月销2000+</text>
|
||||
<text>20分钟</text>
|
||||
<text>1.1km</text>
|
||||
</view>
|
||||
<view class="li" style="align-items: center;">
|
||||
<u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx"
|
||||
height="33.85rpx"></u--image>
|
||||
<text> {{item.service_phone}}</text>
|
||||
</view>
|
||||
<view class="li" style="align-items: center;">
|
||||
<u--image :showLoading="true" src="/static/images/GXSC/SJ.png" width="33.85rpx"
|
||||
height="33.85rpx"></u--image>
|
||||
<text>{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}</text>
|
||||
</view>
|
||||
<view class="li" style="align-items: center;">
|
||||
<u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx"
|
||||
height="33.85rpx"></u--image>
|
||||
<text class="address">{{item.mer_address}}</text>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<u-scroll-list>
|
||||
<view v-for="(item, index) in list" :key="index" style="margin-right: 20rpx;">
|
||||
<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg"
|
||||
width="164.72rpx" height="164.72rpx"></u--image>
|
||||
<view class="goods_tit_a">
|
||||
笑口常开地方就是的开发建设的开发建设的,v空间和客户可怜见立刻就
|
||||
</view>
|
||||
<view style="color: red;">
|
||||
$10.00
|
||||
</view>
|
||||
|
||||
<!-- <image :src="item.thumb"></image> -->
|
||||
</view>
|
||||
<!-- <view v-for="(item, index) in list" :key="index">
|
||||
<image :src="item.thumb"></image>
|
||||
</view> -->
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
<!-- <view class="">
|
||||
<u-scroll-list>
|
||||
<view v-for="(item, index) in list" :key="index" class="goods_card_a">
|
||||
<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg"
|
||||
width="164.72rpx" height="164.72rpx" @click="click"></u--image>
|
||||
<view class="goods_tit_a">
|
||||
笑口常开地方就是的开发建设的开发建设的,v空间和客户可怜见立刻就
|
||||
</view>
|
||||
<view class="goods_price">
|
||||
$10.00
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
-->
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
storeMerchantList,
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
list: [1, 1, 1, 11, 1, 11, 11],
|
||||
storeList: [1, 1, 1, 1, 1, 1, 1, 1, 1]
|
||||
}
|
||||
},
|
||||
onLaunch() {
|
||||
console.log(46545)
|
||||
// storeMerchantList().then(res => {
|
||||
// // this.count = res.data.count
|
||||
// // this.storeList = this.storeList.concat(res.data.list)
|
||||
// // this.loading = false
|
||||
// // this.loadingIcon = false
|
||||
// console.log(res)
|
||||
// })
|
||||
|
||||
},
|
||||
onShow() {
|
||||
// console.log(46545)
|
||||
storeMerchantList().then(res => {
|
||||
// this.count = res.data.count
|
||||
this.storeList = res.data.list
|
||||
// this.loading = false
|
||||
// this.loadingIcon = false
|
||||
// console.log(res)
|
||||
})
|
||||
},
|
||||
methods: {},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.head {
|
||||
// background-color: #F94621;
|
||||
background: url('/static/images/MYTC/BG.png') no-repeat;
|
||||
padding: 20rpx;
|
||||
border-radius: 0rpx 0rpx 31.54rpx 31.54rpx;
|
||||
|
||||
.head_tit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
// margin-bottom: 20rpx;
|
||||
|
||||
.head_tit_l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.head_tit_r {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.head_serch {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.head_content {
|
||||
.head_content_card {
|
||||
background: linear-gradient(to bottom, #FCB9AD, #FFFBF9, #FFFFFF);
|
||||
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
|
||||
overflow: hidden;
|
||||
padding: 20rpx 10rpx;
|
||||
|
||||
.goods_card {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods_tit {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.goods_price {
|
||||
color: #F84221;
|
||||
font-size: 29.79rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.store {
|
||||
.goods_list {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.goods_cards {
|
||||
margin-top: 20rpx;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
|
||||
.left {
|
||||
margin-right: 20rpx;
|
||||
width: 158rpx;
|
||||
height: 158rpx;
|
||||
// background-color: red;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right {
|
||||
// box-sizing: border-box;
|
||||
width: 75vw;
|
||||
overflow: hidden;
|
||||
// background-color: red;
|
||||
|
||||
.heads {
|
||||
font-weight: bold;
|
||||
|
||||
.flag {
|
||||
background: linear-gradient(to bottom, #F84221, #FF6D20);
|
||||
width: 66.59rpx;
|
||||
height: 36.8rpx;
|
||||
text-align: center;
|
||||
font-size: 22.78rpx;
|
||||
color: white;
|
||||
border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.goods_card_a {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods_price_a {
|
||||
color: #F84221;
|
||||
}
|
||||
|
||||
.goods_tit_a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.li {
|
||||
display: flex;
|
||||
font-size: 26.29rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
align-items: center;
|
||||
color: #737373;
|
||||
|
||||
text {
|
||||
margin: 0 10rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<u-popup :show="goodsStatu" mode="bottom" :closeOnClickOverlay="false">
|
||||
<view class="goodsPopup">
|
||||
<view class="close" @click="colse">关闭</view>
|
||||
<view class="container">
|
||||
<!-- <image src="" /> -->
|
||||
<view class="content">
|
||||
<view class="image">
|
||||
<image :src="info.image" />
|
||||
</view>
|
||||
<view class="content_info">
|
||||
<view>{{ info.store_name }}</view>
|
||||
<view>￥:{{ info.price * info.num }}</view>
|
||||
<view>库存:{{ info.stock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods_num">
|
||||
<view>数量</view>
|
||||
<view class="shop_num">
|
||||
<view class="shop_box" @click="addor(-1)">-</view>
|
||||
<view class="num">{{ info.num }}</view>
|
||||
<view class="shop_box" @click="addor(+1)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopgo" @click="handel">添加到购物车</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
goodsStatu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//商品参数
|
||||
goods_info: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info:this.goods_info,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
addor(item, index) {
|
||||
this.info.num += item;
|
||||
if (this.info.num <= 0) {
|
||||
this.info.num = 1;
|
||||
}
|
||||
},
|
||||
// 返回修改过后的商品参数给父组件
|
||||
handel() {
|
||||
this.$emit("change",this.info);
|
||||
},
|
||||
colse(){
|
||||
this.$emit("colses",true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goodsPopup {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 30vh;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
.content {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
.image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 20rpx;
|
||||
> image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.content_info :nth-child(1) {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.content_info :nth-child(2) {
|
||||
font-size: 32rpx;
|
||||
color: #fe9a10;
|
||||
}
|
||||
.content_info :nth-child(3) {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.goods_num {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
.shop_num {
|
||||
display: flex;
|
||||
> view {
|
||||
width: 80rpx;
|
||||
height: 40rpx;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
}
|
||||
.num {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shopgo {
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 200rpx;
|
||||
background: red;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<view class='recommend'>
|
||||
<view class="common-hd">
|
||||
<view class="title">为你推荐</view>
|
||||
</view>
|
||||
<view class='recommendList' :class="indexP?'on':''">
|
||||
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {mapGetters} from "vuex";
|
||||
import { goShopDetail } from '@/libs/order.js'
|
||||
import {initiateAssistApi} from '@/api/activity.js';
|
||||
import {toLogin} from '@/libs/login.js';
|
||||
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
|
||||
export default {
|
||||
components:{WaterfallsFlow},
|
||||
computed: mapGetters(['uid']),
|
||||
props: {
|
||||
hostProduct: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
indexP:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isLogin:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
// 模拟上拉刷新
|
||||
setTimeout(()=>{
|
||||
const newList = this.hostProduct.reverse();
|
||||
this.hostProduct = newList;
|
||||
uni.stopPullDownRefresh();
|
||||
},500)
|
||||
},
|
||||
methods: {
|
||||
goDetail(item){
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
if (this.isLogin) {
|
||||
initiateAssistApi(item.activity_id).then(res => {
|
||||
let id = res.data.product_assist_set_id;
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/assist_detail/index?id=' + id
|
||||
});
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
})
|
||||
});
|
||||
} else {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
toLogin();
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
this.$emit('isShowAuth', true);
|
||||
this.$emit('isAuto', true);
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.common-hd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 118rpx;
|
||||
.title {
|
||||
padding: 0 80rpx;
|
||||
font-size: 34rpx;
|
||||
color: $theme-color;
|
||||
font-weight: bold;
|
||||
background-image: url("~@/static/images/index-title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
.recommend .recommendList {
|
||||
padding: 0 20rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
.recommend .recommendList.on{
|
||||
padding: 0;
|
||||
}
|
||||
/deep/.looming-gray{
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
|
||||
<template>
|
||||
<view class="right-wrapper" @touchmove.stop.prevent="moveStop" :style="viewColor">
|
||||
<view class="control-wrapper animated" :class="showBox?'slideInRight':''">
|
||||
<view class="content-box">
|
||||
<view class="title">店铺类型</view>
|
||||
<view class="brand-wrapper">
|
||||
<scroll-view style="max-height: 400rpx;" :scroll-y="isShow">
|
||||
<view class="wrapper">
|
||||
<view class="item line1" v-for="(item,index) in list" :key="index" :class="item.check?'on':''" @tap="bindChenck1(item)">
|
||||
{{item.type_name}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btns" v-if="!isShow && list.length>9" @click="isShow = true">展开全部<text class="iconfont icon-xiangxia"></text></view>
|
||||
<view class="btns" v-if="isShow && list.length>9" @click="isShow = false">收起<text class="iconfont icon-xiangshang"></text></view>
|
||||
</view>
|
||||
<view class="title">商户分类</view>
|
||||
<view class="brand-wrapper">
|
||||
<scroll-view style="max-height: 400rpx;" :scroll-y="isShow">
|
||||
<view class="wrapper">
|
||||
<view class="item line1" v-for="(item,index) in merCate" :key="index" :class="item.check?'on':''" @tap="bindChenck2(item)">
|
||||
{{item.category_name}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btns" v-if="!isShow && merCate.length>9" @click="isShow = true">展开全部<text class="iconfont icon-xiangxia"></text></view>
|
||||
<!-- <view class="btns" v-if="isShow && merCate.length>9" @click="isShow = false">收起<text class="iconfont icon-xiangshang"></text></view> -->
|
||||
</view>
|
||||
<view class="foot-btn">
|
||||
<view class="btn-item" @click="reset">重置</view>
|
||||
<view class="btn-item confirm" @click="confirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-bg" @click="close"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { mapGetters } from "vuex";
|
||||
export default{
|
||||
props: {
|
||||
storeTypeArr: { //店铺类型
|
||||
type: Array,
|
||||
},
|
||||
merList: { //商户分类
|
||||
type: Array,
|
||||
},
|
||||
status:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
},
|
||||
computed: mapGetters(['viewColor']),
|
||||
data(){
|
||||
return {
|
||||
min: '',
|
||||
max:'',
|
||||
isShow:false,
|
||||
list:[],
|
||||
merCate: [],
|
||||
activeList:[],
|
||||
selectList: [],
|
||||
showBox:false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 重要组件挂载后
|
||||
this.list = this.storeTypeArr //店铺类型
|
||||
this.merCate = this.merList //商户分类
|
||||
this.showBox = this.status
|
||||
},
|
||||
methods:{
|
||||
bindChenck1(item){
|
||||
item.check = !item.check
|
||||
this.arrFilter1()
|
||||
},
|
||||
bindChenck2(item){
|
||||
item.check = !item.check
|
||||
this.arrFilter2()
|
||||
},
|
||||
arrFilter1(){
|
||||
this.selectList = this.list.filter(item=>{
|
||||
return item.check == true
|
||||
})
|
||||
},
|
||||
arrFilter2(){
|
||||
this.activeList = this.merCate.filter(item=>{
|
||||
return item.check == true
|
||||
})
|
||||
},
|
||||
reset(){
|
||||
this.list.forEach((el,index)=>{
|
||||
el.check = false
|
||||
})
|
||||
this.merCate.forEach((el,index)=>{
|
||||
el.check = false
|
||||
})
|
||||
this.arrFilter1()
|
||||
this.arrFilter2()
|
||||
},
|
||||
confirm(){
|
||||
this.arrFilter1()
|
||||
this.arrFilter2()
|
||||
// console.log(this.activeList)
|
||||
let obj = {
|
||||
storeTypeArr:this.selectList,
|
||||
merList: this.activeList,
|
||||
status:false
|
||||
}
|
||||
this.showBox = false
|
||||
this.$emit('confirm',obj)
|
||||
},
|
||||
close(){
|
||||
this.showBox = false
|
||||
this.$emit('close')
|
||||
},
|
||||
moveStop(){}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.slideInRight{
|
||||
animation-duration:.5s
|
||||
}
|
||||
.right-wrapper{
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.control-wrapper{
|
||||
z-index: 90;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 635rpx;
|
||||
height: 100%;
|
||||
background-color: #F5F5F5;
|
||||
.header{
|
||||
padding: 50rpx 26rpx 40rpx;
|
||||
background-color: #fff;
|
||||
.title{
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
}
|
||||
.input-wrapper{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 28rpx;
|
||||
input{
|
||||
width:260rpx;
|
||||
height:56rpx;
|
||||
padding: 0 10rpx;
|
||||
background:rgba(242,242,242,1);
|
||||
border-radius:28rpx;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.line{
|
||||
width:15rpx;
|
||||
height:2rpx;
|
||||
background:#7D7D7D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-box{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 26rpx;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
.title{
|
||||
padding: 40rpx 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
}
|
||||
.brand-wrapper{
|
||||
// flex: 1;
|
||||
overflow: hidden;
|
||||
.wrapper{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.item{
|
||||
display: block;
|
||||
width:186rpx;
|
||||
height:56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background:rgba(242,242,242,1);
|
||||
border-radius:28rpx;
|
||||
margin-top: 25rpx;
|
||||
padding: 0 10rpx;
|
||||
margin-right: 12rpx;
|
||||
&:nth-child(3n){
|
||||
margin-right: 0;
|
||||
}
|
||||
&.on{
|
||||
background: var(--view-minorColor);
|
||||
border:1px solid var(--view-theme);
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
.iconfont{
|
||||
margin-left: 10rpx;
|
||||
margin-top: 5rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
// width: 100%;
|
||||
// text-align: center;
|
||||
bottom: 30rpx;
|
||||
.btn-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:286rpx;
|
||||
height:68rpx;
|
||||
background:rgba(255,255,255,1);
|
||||
border:1px solid rgba(170,170,170,1);
|
||||
border-radius:34rpx;
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
&.confirm{
|
||||
background: var(--view-theme);
|
||||
border-color: var(--view-theme);
|
||||
color: #fff;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-bg{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
<template>
|
||||
<view class="shop_card">
|
||||
<view class="pro_item" @click="goStore(store_item.mer_id)">
|
||||
<view class="merchant_msg" :style="{backgroundImage: `url(${store_item.mer_banner})`}">
|
||||
<view class="shade"></view>
|
||||
<u--image :showLoading="true" :src="store_item.mer_avatar" width="112.28rpx" height="112.28rpx" shape="circle">
|
||||
</u--image>
|
||||
<view class="merchant_r_msg">
|
||||
<view class="flex_a_c_j_sb">
|
||||
<view class="mct_msg_title flex_a_c">
|
||||
<view class="store_site flex_a_c" v-if="store_item.street_name">{{ store_item.street_name }}</view>
|
||||
<view class="name">{{ store_item.mer_name }}</view>
|
||||
</view>
|
||||
<image class="high_img" :src="youZhiImg" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="mct_msg_detail flex_a_c">
|
||||
<view class="product_score">{{ store_item.product_score }}分</view>
|
||||
<text>月售{{ store_item.sales }}份</text>
|
||||
<view style="margin-left: 17.54rpx;">
|
||||
关注人数{{store_item.care_count<10000 ? store_item.care_count : (store_item.care_count/10000).toFixed(2)+'万'}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 地址 -->
|
||||
<view class="location flex" v-if="false">
|
||||
<text v-if="store_item.distance">{{store_item.distance}}</text>
|
||||
<view class="coupon" v-for="(coupon,index) in store_item.store_coupon.slice(0, 3)" :key="index">
|
||||
{{coupon}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="goods_info">
|
||||
<view v-for="(itemn,indexn) in store_item.recommend" :key="indexn" class="goods_info_item"
|
||||
@click.stop="navTogoodsDetail(itemn.product_id)">
|
||||
<image class="goods_info_img" :src="itemn.image" mode="aspectFit"></image>
|
||||
<view class="goods_info_name">{{itemn.store_name}}</view>
|
||||
<view class="goods_info_price">￥{{itemn.price}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ShopCard',
|
||||
props: {
|
||||
store_item: {
|
||||
type: Object
|
||||
},
|
||||
isDetail: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return { youZhiImg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/z2586.png', }
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
navTogoodsDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${id}`
|
||||
})
|
||||
},
|
||||
goStore(id) {
|
||||
// console.log(this.isDetail);
|
||||
if (this.isDetail == 2) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/store/home/index?id=${id}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/nongKe/supply_chain/merchant?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_card {}
|
||||
|
||||
.pro_item {
|
||||
/* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.25); */
|
||||
border-radius: 28.07rpx;
|
||||
margin-bottom: 17.54rpx;
|
||||
// background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/2/storeBg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.merchant_msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #666666;
|
||||
font-size: 24.56rpx;
|
||||
// background-color: rgba(0, 0, 0, 0.5);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 8px;
|
||||
padding: 12.28rpx 22.81rpx;
|
||||
position: relative;
|
||||
|
||||
// 遮罩层
|
||||
.shade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.merchant_avatar {
|
||||
width: 87.72rpx;
|
||||
height: 87.72rpx;
|
||||
border-radius: 100px;
|
||||
margin-right: 10.53rpx;
|
||||
}
|
||||
|
||||
.merchant_r_msg {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
margin-left: 11rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.mct_msg_title {
|
||||
font-size: 28.07rpx;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
|
||||
.store_site {
|
||||
&::after {
|
||||
content: "|";
|
||||
display: inline-block;
|
||||
margin: 8.77rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 157.89rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.high_img {
|
||||
margin-left: 24.56rpx;
|
||||
width: 36.84rpx;
|
||||
height: 43.86rpx;
|
||||
}
|
||||
|
||||
.enter_shop {
|
||||
font-size: 24.56rpx;
|
||||
}
|
||||
|
||||
.location {
|
||||
color: #666666;
|
||||
font-size: 24.56rpx;
|
||||
|
||||
.coupon {
|
||||
margin-left: 17.54rpx;
|
||||
font-size: 24.56rpx;
|
||||
color: #20A162;
|
||||
padding: 3rpx 10rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #20A162;
|
||||
}
|
||||
}
|
||||
|
||||
.mct_msg_detail {
|
||||
margin-top: 21.05rpx;
|
||||
|
||||
.product_score {
|
||||
font-size: 24.56rpx;
|
||||
color: #FE9A10;
|
||||
font-weight: 700;
|
||||
margin-right: 33.33rpx;
|
||||
}
|
||||
|
||||
.grade {
|
||||
font-size: 21.05rpx;
|
||||
color: #20A162;
|
||||
margin: 0 28.07rpx;
|
||||
text-align: center;
|
||||
padding: 5.26rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #20A162;
|
||||
}
|
||||
|
||||
.on_sale {
|
||||
&::before {
|
||||
content: '满减';
|
||||
color: #fff;
|
||||
padding: 3.51rpx 10.53rpx;
|
||||
margin-right: 8.77rpx;
|
||||
border-radius: 7.02rpx 0px 7.02rpx 0px;
|
||||
background: linear-gradient(180deg, #66CE69 0%, #20A162 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods_info {
|
||||
padding: 0 22.81rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
margin-top: 26.32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
|
||||
.goods_info_item {
|
||||
display: inline-block;
|
||||
margin-right: 21.05rpx;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.goods_info_img {
|
||||
width: 140.35rpx;
|
||||
height: 140.35rpx;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.goods_info_name {
|
||||
margin: 14.04rpx 0;
|
||||
width: 140.35rpx;
|
||||
font-size: 28.07rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.goods_info_price {
|
||||
font-size: 24.56rpx;
|
||||
color: #F84221;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<view class="finance">
|
||||
<view class="tabs_box flex_a_c">
|
||||
<u-subsection :list="subsList" :current="curNow" activeColor="#20A162" @change="subsChange"></u-subsection>
|
||||
</view>
|
||||
<block v-for="(item,i) in goodsList" :key="item.order_id">
|
||||
<view class="list_item">
|
||||
<view class="item_header flex_a_c_j_sb">
|
||||
<view class="title_left">
|
||||
<view class="name">采购人:{{item.real_name}}</view>
|
||||
<view class="name">电 话:{{item.user_phone}}</view>
|
||||
<view class="time">{{item.pay_time}}</view>
|
||||
</view>
|
||||
<view class="btn_right" @click="setInfo(item.mer_id,item.order_id)" v-if="item.status=='0'">去发货</view>
|
||||
<view class="btn_right" v-else="item.status=='2'">已完成</view>
|
||||
</view>
|
||||
<view class="item_cont">
|
||||
<view class="item_cell">采购商家：{{item.merchant.mer_name}}</view>
|
||||
<view class="item_cell flex">
|
||||
<view class="">采购详情：</view>
|
||||
<view style="width: 100%;flex: 1;">
|
||||
<!-- v-for="(item,index) in 3" :key="index" -->
|
||||
<view class="flex_a_c_j_sb" v-for="list in item.orderProduct" :key="list.order_product_id">
|
||||
<view class="">{{list.cart_info.product.store_name}}</view>
|
||||
<view class="pro_num">X{{list.product_num}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_cell">收货地址：{{item.user_address}}</view>
|
||||
<view class="item_cell">订单编号：{{item.order_sn}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getOrderList, setAdminOrderDelivery } from '@/api/admin.js'
|
||||
import { Toast } from '../../../libs/uniApi'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curNow: '0',
|
||||
serObj: {
|
||||
status: '0',
|
||||
page: '1',
|
||||
limit: '20',
|
||||
product_type:98,
|
||||
},
|
||||
subsList: ['未发货', '已发货', '全部订单'],
|
||||
goodsList: [],
|
||||
merId: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// console.log(options.merid,'123');
|
||||
this.merId = options.merid
|
||||
},
|
||||
onShow() {
|
||||
this.getDefaultData()
|
||||
},
|
||||
computed: mapGetters(['userInfo']),
|
||||
methods: {
|
||||
subsChange(index) {
|
||||
this.curNow = index
|
||||
//未发货
|
||||
if (index == '0') {
|
||||
this.serObj.status = '0'
|
||||
this.getDefaultData()
|
||||
}
|
||||
//index=='2'已发货
|
||||
if (index == '1') {
|
||||
this.serObj.status = '1'
|
||||
this.getDefaultData()
|
||||
}
|
||||
//全部订单---暂时无接口
|
||||
if (index == '2') {
|
||||
delete this.serObj.status
|
||||
this.getDefaultData()
|
||||
}
|
||||
},
|
||||
//默认是未发货查询
|
||||
async getDefaultData() {
|
||||
const res = await getOrderList(this.serObj, this.merId)
|
||||
// console.log(res);
|
||||
this.goodsList = res.data.list
|
||||
},
|
||||
//去发货---
|
||||
goDeliver_goods(order_id) {},
|
||||
setInfo(merId, orderId) {
|
||||
let that = this;
|
||||
const data = {
|
||||
delivery_id: this.userInfo.phone,
|
||||
delivery_name: this.userInfo.service.nickname,
|
||||
delivery_type: 2,
|
||||
is_split: 0,
|
||||
split: []
|
||||
}
|
||||
setAdminOrderDelivery(merId, orderId, data).then(
|
||||
res => {
|
||||
this.getDefaultData()
|
||||
Toast('提交成功')
|
||||
},
|
||||
error => {
|
||||
that.$util.Tips({
|
||||
title: error
|
||||
})
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.finance {}
|
||||
|
||||
::v-deep .u-subsection {
|
||||
height: 94.74rpx !important;
|
||||
padding: 10.53rpx !important;
|
||||
}
|
||||
|
||||
::v-deep .u-subsection__bar {
|
||||
height: 73.68rpx !important;
|
||||
}
|
||||
|
||||
.tabs_box {
|
||||
padding: 0 28.07rpx;
|
||||
height: 136.84rpx;
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
}
|
||||
.pro_num{
|
||||
color: #20A162;
|
||||
}
|
||||
.title_left {
|
||||
width: 548rpx;
|
||||
}
|
||||
|
||||
.list_item {
|
||||
background-color: #fff;
|
||||
width: 694.74rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 31.58rpx;
|
||||
padding: 28.07rpx;
|
||||
border-radius: 8px;
|
||||
|
||||
.item_header {
|
||||
width: 100%;
|
||||
padding-bottom: 17.54rpx;
|
||||
border-bottom: 1px dashed #20A162;
|
||||
|
||||
.name {
|
||||
font-size: 31.58rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 21.05rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #999;
|
||||
font-size: 24.56rpx;
|
||||
}
|
||||
|
||||
.btn_right {
|
||||
color: #20A162;
|
||||
text-align: center;
|
||||
line-height: 49.12rpx;
|
||||
width: 138.6rpx;
|
||||
height: 49.12rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #20A162;
|
||||
}
|
||||
}
|
||||
|
||||
.item_cell {
|
||||
margin-top: 24.56rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,358 @@
|
|||
<template>
|
||||
<view class="goods_list">
|
||||
<view class="head_search flex_a_c">
|
||||
<view class="search_content flex_a_c_j_sb">
|
||||
<view class="flex_a_c">
|
||||
<view class="iconfont icon-sousuo"></view>
|
||||
<input type="text" v-model="params.keyword" placeholder="请搜索">
|
||||
</view>
|
||||
<button class="search_btn" @click="searchClick">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item,i) in goodsList" :key="i">
|
||||
<view class="list_item flex_a_c">
|
||||
<image class="goods_img" :src="item.image" mode="aspectFit"></image>
|
||||
<view class="r_box flex_a_c_j_sb">
|
||||
<view class="message">
|
||||
<view class="goodstitle">{{item.store_name}}</view>
|
||||
<view class="flex_a_c">
|
||||
<view class="">分类：{{item.storeCategory.cate_name}}</view>
|
||||
<view class="unit">单位：{{item.unit_name}}</view>
|
||||
</view>
|
||||
<view class="bar_code">条形码：{{ item.bar_code || "无" }}</view>
|
||||
</view>
|
||||
<view class="redact_box">
|
||||
<view class="order_price">订货价：{{item.price}}</view>
|
||||
<button class="redact" @click="redactShow(item)">编辑</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<u-popup :show="popupShow" @close="popupShow = false" mode="center" :round="10" closeOnClickOverlay>
|
||||
<view class="popup_cont" v-if="redactGoods.store_name">
|
||||
<view class="title">{{redactGoods.store_name}}</view>
|
||||
<view class="message flex_a_c_j_sb">
|
||||
<view class="">分类：{{redactGoods.storeCategory.cate_name}}</view>
|
||||
<view class="">单位：{{redactGoods.unit_name}}</view>
|
||||
<view class="">订货价：{{redactGoods.price}}</view>
|
||||
</view>
|
||||
<view class="bar_code flex_a_c_j_sb">
|
||||
<view>条形码：{{ redactGoods.bar_code || "无" }}</view>
|
||||
<view>库存：{{ redactGoods.stock }}</view>
|
||||
</view>
|
||||
<view class="sub_title">订货价</view>
|
||||
<input class="input" type="text" placeholder="请输入价格" v-model="goodsPrive">
|
||||
<!-- <view class="sub_title">库存量</view>
|
||||
<input class="input" type="number" placeholder="请输入库存数量" v-model="goodsNum"> -->
|
||||
<view class="btns_box">
|
||||
<view class="cancel" @click="popupClose">取消</view>
|
||||
<view class="save" @click="submitCreatedGoods">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getStorage,
|
||||
removeStorage,
|
||||
Toast,
|
||||
Loading,
|
||||
hideLoading,
|
||||
Modal
|
||||
} from '@/libs/uniApi.js';
|
||||
import {
|
||||
productLstApi,
|
||||
productCreate,
|
||||
productUpdate,
|
||||
productDetail
|
||||
} from '@/api/product.js'
|
||||
import {
|
||||
checkLogin
|
||||
} from '../../../libs/login';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsPrive: '',
|
||||
goodsNum: '',
|
||||
goodsList: [],
|
||||
redactGoods: {},
|
||||
search: '',
|
||||
popupShow: false,
|
||||
merId: '',
|
||||
product_id: '',
|
||||
addGoodsSecoundData: {
|
||||
is_good: 0, // 是否推荐
|
||||
is_gift_bag: 0,
|
||||
sort: '',
|
||||
once_count: '', // 限购数量
|
||||
video_link: ''
|
||||
},
|
||||
disModel: false,
|
||||
particulars: {},
|
||||
mer_id: '',
|
||||
status: 'loadmore',
|
||||
loadingText: '努力加载中',
|
||||
loadmoreText: '轻轻上拉',
|
||||
nomoreText: '实在没有了',
|
||||
params: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
keyword: ''
|
||||
},
|
||||
// page: 1,
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.mer_id = e.merid
|
||||
this.getGoodsList()
|
||||
this.initData();
|
||||
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: e.title
|
||||
// })
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
async searchClick() {
|
||||
const {
|
||||
data
|
||||
} = await productLstApi(this.mer_id, this.params)
|
||||
this.goodsList = data.list
|
||||
},
|
||||
async getGoodsList() {
|
||||
const {
|
||||
data
|
||||
} = await productLstApi(this.mer_id, this.params)
|
||||
this.goodsList.push(...data.list)
|
||||
if (data.length < 9) this.status = 'nomore';
|
||||
},
|
||||
redactShow(item) {
|
||||
this.product_id = item.product_id
|
||||
this.merId = item.mer_id
|
||||
this.redactGoods = item
|
||||
this.popupShow = true
|
||||
productDetail(item.mer_id, item.product_id).then(res => {
|
||||
this.particulars = res.data
|
||||
})
|
||||
// console.log('打开弹框', item);
|
||||
},
|
||||
popupClose() {
|
||||
this.goodsPrive = ''
|
||||
this.goodsNum = ''
|
||||
this.popupShow = false
|
||||
},
|
||||
// 创建商品
|
||||
async submitCreatedGoods() {
|
||||
this.particulars.attrValue[0].stock = Number(this.goodsNum)
|
||||
this.particulars.attrValue[0].price = this.goodsPrive
|
||||
const res = await productUpdate(this.merId, this.product_id, this.particulars)
|
||||
// Toast(message)
|
||||
this.getGoodsList()
|
||||
this.goodsList = []
|
||||
this.popupShow = false
|
||||
this.goodsPrive = ''
|
||||
this.goodsNum = ''
|
||||
},
|
||||
initData() {
|
||||
let editGoodsDetils = {};
|
||||
if (getStorage('goodsDis')) {
|
||||
this.disModel = true;
|
||||
}
|
||||
if (this.product_id) {
|
||||
editGoodsDetils = getStorage('editGoodsDetils');
|
||||
Object.keys(this.addGoodsSecoundData).forEach(item => {
|
||||
this.addGoodsSecoundData[item] = editGoodsDetils[item];
|
||||
});
|
||||
|
||||
if (editGoodsDetils.content) {
|
||||
setStorage('goodsDis', {
|
||||
store_name: editGoodsDetils.content.title,
|
||||
imageList: editGoodsDetils.content.image
|
||||
});
|
||||
this.disModel = true;
|
||||
}
|
||||
setStorage('canChangeSecound', true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (getStorage('addGoodsSecoundData')) {
|
||||
Object.keys(this.addGoodsSecoundData).forEach(item => {
|
||||
if (getStorage('addGoodsSecoundData')[item] || getStorage('addGoodsSecoundData')[item] ==
|
||||
0) {
|
||||
this.addGoodsSecoundData[item] = getStorage('addGoodsSecoundData')[item];
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
// 加载更多
|
||||
onReachBottom() {
|
||||
if (this.status == 'nomore') return;
|
||||
this.status = 'loading';
|
||||
this.params.page = ++this.params.page;
|
||||
this.getGoodsList()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.params.page = 1
|
||||
this.goodsList = []
|
||||
this.getGoodsList()
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods_list {}
|
||||
|
||||
|
||||
.head_search {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 108.77rpx;
|
||||
|
||||
.search_content {
|
||||
margin: 0 auto;
|
||||
width: 694.74rpx;
|
||||
height: 66.67rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border: 1px solid $uni-theme-color;
|
||||
border-radius: 100px;
|
||||
|
||||
.icon-sousuo {
|
||||
font-weight: bold;
|
||||
color: $uni-theme-color;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
color: #fff;
|
||||
width: 135.09rpx;
|
||||
height: 59.65rpx;
|
||||
line-height: 59.65rpx;
|
||||
background: $uni-theme-bg-color;
|
||||
border-radius: 100px;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_item,
|
||||
.popup_cont {
|
||||
margin: 0 auto;
|
||||
width: 694.74rpx;
|
||||
// height: 236.84rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
padding: 21.05rpx;
|
||||
margin-top: 21.05rpx;
|
||||
|
||||
.title {
|
||||
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.list_item {
|
||||
font-size: 24.56rpx;
|
||||
|
||||
.redact_box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.redact {
|
||||
margin-top: 7.02rpx;
|
||||
color: #fff;
|
||||
width: 129.82rpx;
|
||||
height: 50.88rpx;
|
||||
line-height: 50.88rpx;
|
||||
background: $uni-theme-bg-color;
|
||||
border-radius: 7px;
|
||||
font-size: 25rpx
|
||||
}
|
||||
|
||||
.r_box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 35.09rpx;
|
||||
margin: 7.02rpx 0 7.02rpx 35.09rpx;
|
||||
}
|
||||
|
||||
.goods_img {
|
||||
width: 119.3rpx;
|
||||
height: 119.3rpx;
|
||||
border-radius: 8px;
|
||||
margin-right: 26.32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goodstitle {
|
||||
width: 42vw;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
/* 不换行 */
|
||||
overflow: hidden;
|
||||
/* 溢出隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
.popup_cont {
|
||||
width: 680.7rpx;
|
||||
padding: 31.58rpx;
|
||||
font-size: 28.07rpx;
|
||||
|
||||
.message {
|
||||
margin: 28.07rpx 0 21.05rpx 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sub_title {
|
||||
font-size: 28.07rpx;
|
||||
margin: 35.09rpx 0 14.04rpx 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 84.21rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.btns_box {
|
||||
margin-top: 49.12rpx;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
.cancel {
|
||||
font-size: 31.58rpx;
|
||||
}
|
||||
|
||||
.save {
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 77.19rpx;
|
||||
margin-left: 57.89rpx;
|
||||
width: 250.88rpx;
|
||||
height: 77.19rpx;
|
||||
background: #009E56;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<view class="">
|
||||
<map id="map" :enable-zoom="true" :markers="markers" :scale="19" :latitude="28.908447" :enable-scroll="true"
|
||||
:longitude="105.439304" style="width: 100vw;height: 100vh;">
|
||||
<!-- <cover-image class="map_btn" @tap="test" src="../../static/img/logistics/DH.png">
|
||||
</cover-image> -->
|
||||
</map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
vicinityStoreApi,
|
||||
supAgoodsApi
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 28.908447,
|
||||
longitude: 105.439304,
|
||||
title: "测试商家名称",
|
||||
iconPath: "/static/images/GXSC/SJicon.png"
|
||||
}, {
|
||||
id: 2,
|
||||
latitude: 28.909447,
|
||||
longitude: 105.439304,
|
||||
title: "测试商家名称",
|
||||
iconPath: "/static/images/GXSC/SJicon.png"
|
||||
}, {
|
||||
id: 3,
|
||||
latitude: 28.908447,
|
||||
longitude: 105.459304,
|
||||
title: "测试商家名称",
|
||||
iconPath: "/static/images/GXSC/SJicon.png"
|
||||
}, ]
|
||||
}
|
||||
}
|
||||
|
||||
,
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
// supAgoodsApi()
|
||||
vicinityStoreApi(options.street_id).then(res => {
|
||||
// console.log(res.data.list)
|
||||
res.data.list.forEach(item => {
|
||||
if (!item.lat) return
|
||||
this.markers = []
|
||||
// console.log(item)
|
||||
that.markers.push({
|
||||
id: item.mer_id,
|
||||
latitude: item.lat,
|
||||
longitude: item.long,
|
||||
title: item.mer_name,
|
||||
iconPath: "/static/images/GXSC/SJicon.png"
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,619 @@
|
|||
<template>
|
||||
<view class="merchant">
|
||||
<view class="head_search flex_a_c">
|
||||
<view class="search_content flex_a_c_j_sb">
|
||||
<view class="flex_a_c">
|
||||
<view class="iconfont icon-sousuo"></view>
|
||||
<input type="text" v-model="infoData.keyword" placeholder="请搜索">
|
||||
</view>
|
||||
<button class="search_btn" @click="searchBtn">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<view style="background-color: #fff;width: 100%;">
|
||||
<view class="tabs_box flex_a_c_j_sb">
|
||||
<view v-for="(item,index) in tabsList" :key="index" class="flex_a_c" :class="active==index?'active':''">
|
||||
<view @click="tabsChange(index,order)">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view class="item_list flex">
|
||||
<view>
|
||||
<image class="goods_image" :src="item.image" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="left_goods_msg">
|
||||
<view class="name">{{ item.store_name }}</view>
|
||||
<view class="classify flex_a_c">
|
||||
<text>分类：{{ item.cate_name ? item.cate_name : '无' }}</text>
|
||||
<text style="margin-left: 17.54rpx;">单位：{{ item.unit_name }}</text>
|
||||
</view>
|
||||
<view class="bar_code">条形码：{{item.bar_code?item.bar_code : '无'}}</view>
|
||||
</view>
|
||||
<view class="right_goods_msg">
|
||||
<view class="num">订货价：{{item.price}}</view>
|
||||
<view class="add_goods" @click="getGoodsDetails(item)">加入购物单</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
|
||||
|
||||
<navigator class="bottom_purchase" url="./shopping_trolley" open-type="navigate">采购清单</navigator>
|
||||
|
||||
<goodsPopup :goodsStatu="isPopupShow" @colses="isPopupShow=false" :goods_info="goodsInfo"></goodsPopup>
|
||||
<u-popup :show="show" @close="close">
|
||||
<view>
|
||||
<h3 style=" margin: 15px 5px 5px 24px;">颜色规格</h3>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
|
||||
<view class="scroll-view-item" v-for="(item,index) in attrValue" :key="index">
|
||||
<view class="scroll_item_top">
|
||||
<image :src="Image" mode=""></image>
|
||||
<view class="text">
|
||||
<view>{{item.sku}}</view>
|
||||
<view>库存: <text>{{item.stock}}</text> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll_item_bon">
|
||||
<view class="reduce" @click.stop='subCart(item,index)'>-</view>
|
||||
<input type="text" disabled="true" v-model="goods[index].cart_num" />
|
||||
<view class="plus" :class="goods.numAdd ? 'on' : ''" @click.stop='addCart(item,index)'>+</view>
|
||||
<!-- <u-number-box
|
||||
button-size="36"
|
||||
color="#ffffff"
|
||||
bgColor="#2979ff"
|
||||
iconStyle="color: #fff"
|
||||
v-model="number.cart_num"
|
||||
></u-number-box> -->
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<button class="btn" @click="addshopcart">确定</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getStoreGoods,
|
||||
getProductDetail,
|
||||
postCartAdd
|
||||
} from '@/api/store.js'
|
||||
import { Toast } from '@/libs/uniApi'
|
||||
import goodsPopup from '../cpns/goodsPopup.vue'
|
||||
import {
|
||||
changeCartNum
|
||||
} from '@/api/order.js';
|
||||
export default {
|
||||
components: {
|
||||
goodsPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 'loadmore',
|
||||
loadingText: '努力加载中',
|
||||
loadmoreText: '轻轻上拉',
|
||||
nomoreText: '我也是有底线的~~',
|
||||
myCount: 0,
|
||||
goodsInfo: {},
|
||||
isPopupShow: false,
|
||||
cartCount: 0,
|
||||
isAllSelect: false,
|
||||
search: '',
|
||||
active: 0,
|
||||
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
tabsList: ['综合', '新品', '价格(升)', '销量'],
|
||||
value: 5,
|
||||
list: [],
|
||||
attr: {
|
||||
cartAttr: false,
|
||||
productAttr: [],
|
||||
productSelect: {}
|
||||
},
|
||||
productValue: [], // 系统属性
|
||||
attrValue: '', // 已选属性,
|
||||
infoData: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
product_type: 98,
|
||||
keyword: ''
|
||||
},
|
||||
id: '',
|
||||
order: true,
|
||||
num: '',
|
||||
show: false,
|
||||
scrollTop: 0,
|
||||
attrValue: [],
|
||||
Image: '',
|
||||
goods: [{
|
||||
cart_num: 0
|
||||
}],
|
||||
goodsLite: {},
|
||||
goodsindexL: ''
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.id = e.id
|
||||
this.getStoreGoodsList()
|
||||
|
||||
// getStoreGoods(e.id, this.infoData).then(res => {
|
||||
// this.list = res.data.list
|
||||
// })
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
async searchBtn() {
|
||||
this.infoData.page = 1
|
||||
const res = await getStoreGoods(this.id, this.infoData)
|
||||
this.list = res.data.list
|
||||
},
|
||||
// jian() {
|
||||
// Toast('请到购物清单减少数量')
|
||||
// },
|
||||
// goodsPopupClick(item) {
|
||||
// this.goodsInfo = item
|
||||
// this.isPopupShow = true
|
||||
// },
|
||||
navGoodsDetails(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${id}&type=town`
|
||||
})
|
||||
},
|
||||
valChange(e) {
|
||||
// console.log('当前值为: ' + e.value)
|
||||
},
|
||||
//添加购物车 *data是修改过后的参数
|
||||
handelInfo(data) {},
|
||||
//获取商品数据
|
||||
async getStoreGoodsList() {
|
||||
// console.log(this.infoData);
|
||||
const res = await getStoreGoods(this.id, this.infoData)
|
||||
this.list.push(...res.data.list)
|
||||
if (res.data.list.length < 10) this.status = 'nomore'
|
||||
// this.publicMethods1(res)
|
||||
},
|
||||
//上拉刷新
|
||||
publicMethods1(res) {
|
||||
this.num = res.data.count
|
||||
this.list = [...this.list, ...res.data.list]
|
||||
if (this.list.length < this.num) {
|
||||
this.status = 'loadmore'
|
||||
} else {
|
||||
this.status = 'nomore'
|
||||
}
|
||||
|
||||
},
|
||||
tabsChange(i, order) {
|
||||
this.active = i
|
||||
this.list = []
|
||||
this.infoData.page = 1
|
||||
this.order = !this.order
|
||||
if (i == 0) {
|
||||
this.infoData.order = ''
|
||||
this.getStoreGoodsList()
|
||||
}
|
||||
if (i == 1) {
|
||||
this.infoData.order = 'is_new'
|
||||
this.getStoreGoodsList()
|
||||
}
|
||||
//价格升序
|
||||
if (i == 2) {
|
||||
if (order) {
|
||||
this.infoData.order = 'price_asc'
|
||||
this.getStoreGoodsList()
|
||||
this.tabsList[2] = '价格(升)'
|
||||
} else {
|
||||
this.infoData.order = 'price_desc'
|
||||
this.getStoreGoodsList()
|
||||
this.tabsList[2] = '价格(降)'
|
||||
}
|
||||
}
|
||||
if (i == 3) {
|
||||
this.infoData.order = 'sales'
|
||||
this.getStoreGoodsList()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取产品详情
|
||||
*/
|
||||
getGoodsDetails(item) {
|
||||
console.log(item);
|
||||
if (item.product.attrValue.length == 1) {
|
||||
let that = this;
|
||||
const count = '1'
|
||||
getProductDetail(item.product_id, { product_type: 98 }).then(res => {
|
||||
const unique = Object.values(res.data.sku)[0].unique
|
||||
that.goCat(res.data.product_id, count, unique)
|
||||
}).catch(err => {
|
||||
Toast(err)
|
||||
})
|
||||
} else {
|
||||
this.show = true
|
||||
this.attrValue = item.product.attrValue
|
||||
this.Image = item.image
|
||||
for (let i = 1; i < item.product.attrValue.length; i++) {
|
||||
this.goods.push({
|
||||
cart_num: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
/*
|
||||
* 加入购物车
|
||||
*/
|
||||
goCat: function(id, count, unique) {
|
||||
let that = this
|
||||
let q = {
|
||||
is_new: 0,
|
||||
product_id: id,
|
||||
cart_num: count,
|
||||
product_attr_unique: unique,
|
||||
// source: this.source,
|
||||
product_type: 98,
|
||||
spread_id: ''
|
||||
};
|
||||
postCartAdd(q)
|
||||
.then(res => {
|
||||
that.$util.Tips({
|
||||
title: "添加购物车成功",
|
||||
});
|
||||
})
|
||||
.catch(res => {
|
||||
return that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
//购物车增加
|
||||
addCart(item, index) {
|
||||
let that = this
|
||||
that.goods[index].cart_num = that.goods[index].cart_num + 1
|
||||
that.goods.numAdd = true
|
||||
that.goodsLite = item
|
||||
that.goodsindexL = index
|
||||
let q = {
|
||||
is_new: 0,
|
||||
product_id: that.goodsLite.product_id,
|
||||
cart_num: that.goods[that.goodsindexL].cart_num,
|
||||
product_attr_unique: that.goodsLite.unique,
|
||||
// source: this.source,
|
||||
product_type: 98,
|
||||
spread_id: ''
|
||||
};
|
||||
postCartAdd(q).then(res => {
|
||||
that.$util.Tips({
|
||||
title: "添加购物车成功",
|
||||
});
|
||||
})
|
||||
.catch(res => {
|
||||
this.show = false
|
||||
return that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
subCart(item, index) {
|
||||
let that = this
|
||||
if (that.goods[index].cart_num == 0) {
|
||||
return
|
||||
} else {
|
||||
that.goods[index].cart_num = that.goods[index].cart_num - 1
|
||||
that.goods.numAdd = true
|
||||
that.goodsLite = item
|
||||
that.goodsindexL = index
|
||||
let q = {
|
||||
is_new: 0,
|
||||
product_id: that.goodsLite.product_id,
|
||||
cart_num: that.goods[that.goodsindexL].cart_num,
|
||||
product_attr_unique: that.goodsLite.unique,
|
||||
// source: this.source,
|
||||
product_type: 98,
|
||||
spread_id: ''
|
||||
};
|
||||
postCartAdd(q).then(res => {
|
||||
that.$util.Tips({
|
||||
title: "添加购物车成功",
|
||||
});
|
||||
})
|
||||
.catch(res => {
|
||||
this.show = false
|
||||
return that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
addshopcart() {
|
||||
console.log(this.goodsLite);
|
||||
console.log(this.goodsindexL);
|
||||
this.show = false
|
||||
// let that = this
|
||||
// let q = {
|
||||
// is_new: 0,
|
||||
// product_id: that.goodsLite.product_id,
|
||||
// cart_num: that.goods[that.goodsindexL].cart_num,
|
||||
// product_attr_unique: that.goodsLite.unique,
|
||||
// // source: this.source,
|
||||
// product_type: 98,
|
||||
// spread_id: ''
|
||||
// };
|
||||
// postCartAdd(q).then(res => {
|
||||
// this.show = false
|
||||
// that.$util.Tips({
|
||||
// title: "添加购物车成功",
|
||||
// });
|
||||
// })
|
||||
// .catch(res => {
|
||||
// this.show = false
|
||||
// return that.$util.Tips({
|
||||
// title: res
|
||||
// });
|
||||
// });
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
//如果状态为nomore 则不能在触发上拉事件
|
||||
if (this.status != 'nomore') {
|
||||
this.infoData.page++
|
||||
this.getStoreGoodsList()
|
||||
}
|
||||
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//减号
|
||||
/deep/.uicon-minus {
|
||||
font-weight: 700 !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
width: 70rpx;
|
||||
height: 60rpx;
|
||||
background-color: rgb(235, 236, 238);
|
||||
padding-top: 20rpx;
|
||||
padding-left: 24rpx;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
||||
.reduce {
|
||||
font-weight: bold !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.merchant {
|
||||
padding-bottom: 175.44rpx;
|
||||
}
|
||||
|
||||
.icon-xuanzhong1 {
|
||||
color: $uni-theme-color;
|
||||
}
|
||||
|
||||
.head_search {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 108.77rpx;
|
||||
|
||||
.search_content {
|
||||
margin: 0 auto;
|
||||
width: 694.74rpx;
|
||||
height: 66.67rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border: 1px solid $uni-theme-color;
|
||||
border-radius: 100px;
|
||||
|
||||
.icon-sousuo {
|
||||
font-weight: bold;
|
||||
color: $uni-theme-color;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
color: #fff;
|
||||
width: 135.09rpx;
|
||||
height: 59.65rpx;
|
||||
line-height: 59.65rpx;
|
||||
background: $uni-theme-bg-color;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs_box {
|
||||
justify-content: space-around;
|
||||
width: 694.74rpx;
|
||||
margin: 0 auto;
|
||||
height: 80.7rpx;
|
||||
border-top: 1px solid #E7E6E4;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 700;
|
||||
color: $uni-theme-color;
|
||||
}
|
||||
|
||||
.item_list {
|
||||
margin: 0 auto;
|
||||
margin-top: 28.07rpx;
|
||||
padding: 21.05rpx;
|
||||
width: 694.74rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
font-size: 24.56rpx;
|
||||
|
||||
.goods_image {
|
||||
width: 119.3rpx;
|
||||
height: 119.3rpx;
|
||||
border-radius: 8px;
|
||||
margin-right: 26.32rpx;
|
||||
}
|
||||
|
||||
.left_goods_msg {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
font-size: 28.07rpx;
|
||||
font-weight: 700;
|
||||
width: 315.79rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
.price {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right_goods_msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.num {
|
||||
font-size: 24.56rpx;
|
||||
color: $uni-theme-color;
|
||||
}
|
||||
|
||||
.purchase_btn {
|
||||
color: #fff;
|
||||
padding: 7.02rpx 21.05rpx;
|
||||
background: $uni-theme-color;
|
||||
border-radius: 100px;
|
||||
margin-left: 21.05rpx;
|
||||
}
|
||||
|
||||
.add_goods {
|
||||
text-align: center;
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: $uni-theme-bg-color;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_purchase {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 52.63rpx;
|
||||
transform: translate(-50%);
|
||||
width: 526.32rpx;
|
||||
height: 80.7rpx;
|
||||
text-align: center;
|
||||
line-height: 80.7rpx;
|
||||
border-radius: 100px;
|
||||
background-color: $uni-theme-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: 50vh;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.scroll-view-item {
|
||||
font-size: 36rpx;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
.scroll_item_top {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
|
||||
view {
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
text {
|
||||
color: #F84221;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll_item_bon {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.reduce {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
color: #BDC4CE;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
}
|
||||
|
||||
.on {
|
||||
background-color: #e3e3e3;
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: linear-gradient(84deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 24px 24px 24px 24px;
|
||||
line-height: 50px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,548 @@
|
|||
<template>
|
||||
<view class="supplier" :style="{height: winHeight + 'px' }">
|
||||
<!-- <view class="head-wrapper" :style="'top:'+statusBarHeight">
|
||||
<view class="head-menu">
|
||||
<view class='iconfont icon-xiangzuo' @click="returns"></view>
|
||||
<view class="iconfont icon-shouye4" @click="goHome"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="header_warpper">
|
||||
<!-- <u-swiper :list="swiperList" keyName="img" :autoplay="true" height="491.23rpx"></u-swiper> -->
|
||||
<!-- <view class="head_search flex_a_c">
|
||||
<view class="search_content flex_a_c_j_sb">
|
||||
<view class="flex_a_c">
|
||||
<view class="iconfont icon-sousuo"></view>
|
||||
<input type="text" v-model="sotreParam.keyword" placeholder="请搜索">
|
||||
</view>
|
||||
<button class="search_btn" @click="searchStoreMerchant">搜索</button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="con-box">
|
||||
<view class="left_classify">
|
||||
<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'>
|
||||
<block v-for="(item,index) in merList" :key="item.merchant_category_id">
|
||||
<view class="clify_item" :class="activeTwo === index ? 'pictch' : ''" @click="classifyClick(item, index)">
|
||||
{{ item.category_name }}
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="right_storee">
|
||||
<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'
|
||||
@scrolltolower="scrolltolower" class="my-scroll-view">
|
||||
<image class="banner" :src="src" mode="aspectFit"></image>
|
||||
<view style="background-color: #fff;width: 100%;">
|
||||
<view class="tabs_box flex_a_c_j_sb">
|
||||
<view v-for="(item,index) in tabsList" :key="index" class="flex_a_c" :class="active==index?'active':''">
|
||||
<view @click="tabsChange(index)">{{item}}</view>
|
||||
<!-- <view class="iconfont icon-shaixuan" v-if="index==3"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item,index) in storeMerchant" :key="index">
|
||||
<storeCard :store_item="item" :category="item.category_name" :isDetail="isDetail"></storeCard>
|
||||
</block>
|
||||
<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
|
||||
:nomore-text="nomoreText" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- <u-action-sheet :show="show" @close="close" @select="select" :actions="actions" :closeOnClickOverlay="true">
|
||||
</u-action-sheet>
|
||||
<rightSlider v-if="rightBox" :status="rightBox" :merList="merList" :storeTypeArr="storeTypeArr" @confirm="confirm"
|
||||
@close="rightSliderClose"></rightSlider> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||||
import storeCard from './component/shop_card.vue'
|
||||
import rightSlider from './component/rightSlider';
|
||||
import { getDiy } from '@/api/api.js'
|
||||
import { storeMerchantList, merClassifly, getStoreTypeApi } from '@/api/store.js'
|
||||
import { storeClassifyDel } from '@/api/product.js'
|
||||
export default {
|
||||
components: {
|
||||
rightSlider,
|
||||
storeCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight, //系统导航条高度
|
||||
swiperList: [],
|
||||
activeTwo: 0,
|
||||
winHeight: 0,
|
||||
num: '',
|
||||
status: 'loadmore',
|
||||
loadingText: '努力加载中',
|
||||
loadmoreText: '轻轻上拉',
|
||||
nomoreText: '我也是有底线的~~',
|
||||
show: false,
|
||||
actions: [{
|
||||
name: '选项1',
|
||||
},
|
||||
{
|
||||
name: '选项2',
|
||||
},
|
||||
{
|
||||
name: '选项3',
|
||||
}, {
|
||||
name: '选项4',
|
||||
},
|
||||
{
|
||||
name: '选项5',
|
||||
},
|
||||
],
|
||||
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
search: '',
|
||||
tabsList: ['综合排序', '销量优先', '好评'],
|
||||
active: 0,
|
||||
storeMerchant: [],
|
||||
storeList: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
StoreType: [],
|
||||
rightBox: false,
|
||||
merList: [], //商户分类
|
||||
storeTypeArr: [], //店铺类型
|
||||
sotreParam: {
|
||||
keyword: '',
|
||||
page: 1,
|
||||
limit: 10,
|
||||
order: 'order', // 顺序
|
||||
category_id: '', // 分类
|
||||
type_id: '', // 类型
|
||||
street_id: '' // 位置
|
||||
},
|
||||
isDetail: 2
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.sotreParam.street_id = e.street_id
|
||||
if (e.type_id) {
|
||||
this.sotreParam.type_id = e.type_id
|
||||
}
|
||||
if (e.isDetail) this.isDetail = e.isDetail
|
||||
this.getStoreMerchant()
|
||||
this.getStore()
|
||||
this.getClassfication()
|
||||
this.getStoreType()
|
||||
this.getBanner()
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.winHeight = res.windowHeight
|
||||
this.$set(this, 'winHeight', res.windowHeight)
|
||||
},
|
||||
});
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
// 后退
|
||||
returns: function() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
// 首页
|
||||
goHome() {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/index'
|
||||
});
|
||||
},
|
||||
async getBanner() {
|
||||
const { data } = await getDiy({ id: 0 })
|
||||
if (data.value['1683638943100000']) {
|
||||
this.swiperList = data.value['1683638943100000'].swiperConfig.list
|
||||
} else {
|
||||
this.swiperList = data.value['1683875164005000'].swiperConfig.list
|
||||
}
|
||||
},
|
||||
classifyClick(item, index) {
|
||||
this.activeTwo = index
|
||||
this.storeMerchant = []
|
||||
this.sotreParam.page = 1
|
||||
this.sotreParam.category_id = item.merchant_category_id
|
||||
this.getStoreMerchant();
|
||||
},
|
||||
// 获取商户分类
|
||||
getClassfication: function() {
|
||||
let temp = []
|
||||
merClassifly()
|
||||
.then(res => {
|
||||
temp = res.data.map(item => {
|
||||
return {
|
||||
...item,
|
||||
check: false
|
||||
}
|
||||
})
|
||||
if (this.sotreParam.category_id.length > 0) {
|
||||
this.sotreParam.category_id.forEach((ids, index) => {
|
||||
temp.forEach(el => {
|
||||
if (ids == el.merchant_category_id) {
|
||||
el.check = true
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
temp.unshift({
|
||||
category_name: '全部',
|
||||
merchant_category_id: ''
|
||||
})
|
||||
this.merList = temp
|
||||
})
|
||||
.catch(res => {
|
||||
this.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取店铺类型
|
||||
getStoreType: function() {
|
||||
let temp = []
|
||||
getStoreTypeApi()
|
||||
.then(res => {
|
||||
temp = res.data.map(item => {
|
||||
return {
|
||||
...item,
|
||||
check: false
|
||||
}
|
||||
})
|
||||
if (this.sotreParam.type_id.length > 0) {
|
||||
this.sotreParam.type_id.forEach((ids, index) => {
|
||||
temp.forEach(el => {
|
||||
if (ids == el.mer_type_id) {
|
||||
el.check = true
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
this.storeTypeArr = temp
|
||||
})
|
||||
.catch(res => {
|
||||
this.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 组件确定
|
||||
confirm(data) {
|
||||
let arr1 = [],
|
||||
arr2 = []
|
||||
if (data.storeTypeArr.length == 0) {
|
||||
this.sotreParam.type_id = ''
|
||||
} else {
|
||||
data.storeTypeArr.forEach(item => {
|
||||
arr1.push(item.mer_type_id)
|
||||
})
|
||||
this.sotreParam.type_id = arr1.toString();
|
||||
}
|
||||
if (data.merList.length == 0) {
|
||||
this.sotreParam.category_id = ''
|
||||
} else {
|
||||
data.merList.forEach(item => {
|
||||
arr2.push(item.merchant_category_id)
|
||||
})
|
||||
this.sotreParam.category_id = arr2.toString();
|
||||
}
|
||||
this.rightBox = data.status
|
||||
this.loadend = false;
|
||||
this.$set(this.sotreParam, 'page', 1)
|
||||
this.storeList = [];
|
||||
this.getStoreMerchant();
|
||||
},
|
||||
// 组件关闭
|
||||
rightSliderClose() {
|
||||
this.rightBox = false
|
||||
},
|
||||
//获取商户
|
||||
async getStoreMerchant() {
|
||||
const res = await storeMerchantList(this.sotreParam)
|
||||
this.storeMerchant.push(...res.data.list)
|
||||
// console.log(this.storeMerchant);
|
||||
if (res.data.list.length < 10) this.status = 'nomore'
|
||||
},
|
||||
async searchStoreMerchant() {
|
||||
this.storeMerchant = []
|
||||
const res = await storeMerchantList(this.sotreParam)
|
||||
this.storeMerchant = res.data.list
|
||||
},
|
||||
navigator(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/nongKe/supply_chain/merchant?id=${id}`
|
||||
})
|
||||
},
|
||||
//获取商户类型分类
|
||||
async getStore() {
|
||||
const res = await merClassifly()
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
this.actions[i].name = res.data[i].category_name
|
||||
this.actions[i].index = res.data[i].merchant_category_id
|
||||
}
|
||||
},
|
||||
tabsChange(i) {
|
||||
this.active = i
|
||||
// this.sotreParam.category_id = ''
|
||||
// this.sotreParam.type_id = ''
|
||||
this.sotreParam.page = 1
|
||||
this.storeMerchant = []
|
||||
if (this.active == 0) {
|
||||
this.sotreParam.order = ''
|
||||
this.getStoreMerchant()
|
||||
}
|
||||
if (this.active == 1) {
|
||||
this.sotreParam.order = 'sales'
|
||||
this.getStoreMerchant()
|
||||
}
|
||||
if (this.active == 2) {
|
||||
this.sotreParam.order = 'rate'
|
||||
this.getStoreMerchant()
|
||||
}
|
||||
//筛选
|
||||
if (this.active == 3) {
|
||||
this.status = 'nomore'
|
||||
this.rightBox = true
|
||||
// this.sotreParam.order = ''
|
||||
// this.getStoreMerchant()
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
select(e) {
|
||||
// console.log('select', e);
|
||||
|
||||
},
|
||||
scrolltolower() {
|
||||
if (this.status != 'nomore') {
|
||||
this.sotreParam.page++
|
||||
this.getStoreMerchant()
|
||||
}
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
//如果状态为nomore 则不能在触发上拉事件
|
||||
if (this.status != 'nomore') {
|
||||
this.sotreParam.page++
|
||||
this.getStoreMerchant()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.storeMerchant = []
|
||||
this.getStoreMerchant()
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.supplier {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header_warpper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.head_search {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 108.77rpx;
|
||||
|
||||
.search_content {
|
||||
margin: 0 auto;
|
||||
width: 694.74rpx;
|
||||
height: 66.67rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border: 1px solid $uni-theme-color;
|
||||
border-radius: 100px;
|
||||
|
||||
.icon-sousuo {
|
||||
font-weight: bold;
|
||||
color: $uni-theme-color;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
color: #fff;
|
||||
width: 135.09rpx;
|
||||
height: 59.65rpx;
|
||||
line-height: 59.65rpx;
|
||||
background: $uni-theme-bg-color;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.con-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-top: 28.07rpx;
|
||||
}
|
||||
|
||||
.left_classify {
|
||||
width: 192.98rpx;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
.clify_item {
|
||||
width: 192.98rpx;
|
||||
height: 112.28rpx;
|
||||
text-align: center;
|
||||
line-height: 112.28rpx;
|
||||
}
|
||||
|
||||
.pictch {
|
||||
background: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background-color: #F84221;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_storee {
|
||||
flex: 1;
|
||||
width: 557.89rpx;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
padding: 0 12.28rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 131.58rpx;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tabs_box {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 80.7rpx;
|
||||
border-top: 1px solid #E7E6E4;
|
||||
background-color: #fff;
|
||||
padding: 0 21.05rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 700;
|
||||
color: #F84221;
|
||||
}
|
||||
|
||||
.item_cont {
|
||||
width: 100%;
|
||||
// height: 147.37rpx;
|
||||
padding: 17.54rpx 28.07rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 28.07rpx;
|
||||
border-radius: 8px;
|
||||
|
||||
.item-left {
|
||||
.img {
|
||||
width: 98.25rpx;
|
||||
height: 98.25rpx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-right {
|
||||
margin-left: 21.05rpx;
|
||||
|
||||
.store_name {
|
||||
margin-bottom: 8.77rpx;
|
||||
|
||||
.sales_volume {
|
||||
font-size: 28.07rpx;
|
||||
color: #666;
|
||||
margin-left: 52.63rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
width: 245.61rpx;
|
||||
font-size: 31.58rpx;
|
||||
// font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.msg {
|
||||
|
||||
.category_name {
|
||||
color: $uni-theme-color;
|
||||
}
|
||||
|
||||
.scope {
|
||||
flex: 1;
|
||||
width: 350.88rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&::before {
|
||||
content: '|';
|
||||
margin: 0 10.53rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-wrapper {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
top: 0;
|
||||
/* #ifdef MP */
|
||||
height: 43px;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
height: 114rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.head-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 54rpx;
|
||||
width: 140rpx;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
border-radius: 27rpx;
|
||||
|
||||
.iconfont {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.icon-xiangzuo {
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue