第一次提交
This commit is contained in:
wangxiaowei
301
pages/shop/application_status.vue
Normal file
301
pages/shop/application_status.vue
Normal file
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="head">
|
||||
<view class="h1">当前申请状态</view>
|
||||
<view v-if="detail.status==0" class="h1 orange">审核中</view>
|
||||
<view v-if="detail.status==1" class="h1 green">审核通过</view>
|
||||
<view v-if="detail.status==2" class="h1 red">审核失败</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="body_hint h3">客服会尽快进行审核</view>
|
||||
<view class="progress_bar">
|
||||
<progress v-if="detail.status==0" activeColor='#24DB5A' backgroundColor="#A2A2A2" percent="50" stroke-width="6" />
|
||||
<progress v-if="detail.status==1" activeColor='#24DB5A' backgroundColor="#A2A2A2" percent="100" stroke-width="6" />
|
||||
<progress v-if="detail.status==2" activeColor='#24DB5A' backgroundColor="#A2A2A2" percent="100" stroke-width="6" />
|
||||
</view>
|
||||
<view class="progress_bar_image">
|
||||
<view class="progress_bar_image_items">
|
||||
<view class="icon iconfont icon-edit progress_bar_image_item bg_green"></view>
|
||||
<view class="h3">已提交</view>
|
||||
</view>
|
||||
<view class="progress_bar_image_items">
|
||||
<view class="icon iconfont icon-gengduo progress_bar_image_item bg_green"></view>
|
||||
<view v-if="detail.status==0" class="h3 orange">审核中</view>
|
||||
<view v-if="detail.status==1" class="h3">审核中</view>
|
||||
<view v-if="detail.status==2" class="h3">审核中</view>
|
||||
</view>
|
||||
<view class="progress_bar_image_items">
|
||||
<view v-if="detail.status==0" class="icon iconfont icon-ic_check progress_bar_image_item bg_gray"></view>
|
||||
<view v-if="detail.status==1" class="icon iconfont icon-ic_check progress_bar_image_item bg_green"></view>
|
||||
<view v-if="detail.status==2" class="icon iconfont icon-guanbi progress_bar_image_item bg_red"></view>
|
||||
<view v-if="detail.status==0" class="h3">审核通过</view>
|
||||
<view v-if="detail.status==1" class="h3 green">审核通过</view>
|
||||
<view v-if="detail.status==2" class="h3 red">审核失败</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="return">
|
||||
<view v-if="detail.status==1" class="h1">恭喜，您的入驻审核已通过！</view>
|
||||
<view v-if="detail.status==2" class="h1">抱歉，您的入驻审核未通过！</view>
|
||||
<view v-if="detail.status==2" class="h3">未通过原因：{{detail.content}}</view>
|
||||
<button v-if="detail.status==2" @click="gotoReg()" class="btn1" type="default">重新申请</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 审核详情
|
||||
detail: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
/*获取个人中心数据*/
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/*获取数据*/
|
||||
getData() {
|
||||
let self = this;
|
||||
self._post('supplier.apply/detail', {}, function(res) {
|
||||
self.detail = res.data.detail;
|
||||
});
|
||||
},
|
||||
//重新注册
|
||||
gotoReg() {
|
||||
this.gotoPage('/pages/shop/register');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 32rpx;
|
||||
color: #585858;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 28rpx;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 24rpx;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 20rpx;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #E22319;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #24DB5A;
|
||||
}
|
||||
|
||||
.orange {
|
||||
color: #FF7E00;
|
||||
}
|
||||
|
||||
.bg_gray {
|
||||
background-color: #A2A2A2;
|
||||
}
|
||||
|
||||
.bg_red {
|
||||
background-color: #E22319;
|
||||
}
|
||||
|
||||
.bg_green {
|
||||
background-color: #24DB5A;
|
||||
}
|
||||
|
||||
.bg_orange {
|
||||
background-color: #FF7E00;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 750rpx;
|
||||
height: 100rpx;
|
||||
background-color: #ECECEC;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10rpx #585858;
|
||||
}
|
||||
|
||||
.body_hint {
|
||||
width: 500rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
margin: 0 auto;
|
||||
background-color: #FFF7E2;
|
||||
text-align: center;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.progress_bar {
|
||||
width: 450rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.progress_bar_image {
|
||||
width: 500rpx;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: -40rpx;
|
||||
}
|
||||
|
||||
.progress_bar_image_items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress_bar_image_item {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
|
||||
.return {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
.return view {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.return_title {}
|
||||
|
||||
.return_title2 {}
|
||||
|
||||
.return .btn1 {
|
||||
width: 300rpx;
|
||||
height: 65rpx;
|
||||
line-height: 65rpx;
|
||||
border-radius: 50rpx;
|
||||
color: white;
|
||||
background-color: #FF7E00;
|
||||
margin-top: 50rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.return .btn2 {
|
||||
width: 300rpx;
|
||||
height: 65rpx;
|
||||
line-height: 65rpx;
|
||||
border-radius: 50rpx;
|
||||
color: white;
|
||||
background-color: #24DB5A;
|
||||
margin-top: 50rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pay_window {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.pay_window_box {
|
||||
width: 70%;
|
||||
height: 500rpx;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
top: 200rpx;
|
||||
padding: 50rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.buy-checkout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buy-checkout .item {
|
||||
min-height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.buy-checkout .iconfont.icon-weixin {
|
||||
color: #04be01;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.buy-checkout .iconfont.icon-yue {
|
||||
color: #f0de7c;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.buy-checkout .item.active .iconfont.icon-xuanze {
|
||||
color: #04be01;
|
||||
}
|
||||
|
||||
.pay-bt {
|
||||
padding-top: 130rpx;
|
||||
padding-bottom: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pay-bts {
|
||||
width: 225rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
font-size: 32rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #04be01;
|
||||
}
|
||||
|
||||
.icon-tijiaochenggong {
|
||||
color: #04be01;
|
||||
}
|
||||
</style>
|
||||
60
pages/shop/index.vue
Normal file
60
pages/shop/index.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view>
|
||||
<register v-if="supplierStatus == 0"></register>
|
||||
<application v-if="supplierStatus == 1"></application>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import register from './register.vue';
|
||||
import application from './application_status.vue';
|
||||
export default {
|
||||
components: {
|
||||
register,
|
||||
application
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
supplierStatus: -1
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let self = this;
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
self._get('user.index/detail',{
|
||||
|
||||
}, res => {
|
||||
self.supplierStatus = res.data.supplierStatus;
|
||||
if (self.supplierStatus == 2) {
|
||||
self.gotoPage('pages/user/my_shop/my_shop', 'redirect');
|
||||
} else if (self.supplierStatus == 3) {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
content: '店铺异常,请联系客服处理'
|
||||
});
|
||||
} else {
|
||||
let title = '';
|
||||
if(self.supplierStatus == 0){
|
||||
title = '申请入驻';
|
||||
}else{
|
||||
title = '申请审核中';
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: title
|
||||
});
|
||||
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
433
pages/shop/register.vue
Normal file
433
pages/shop/register.vue
Normal file
@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="bg_image">
|
||||
<image :src="bg_image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="certification">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="certification_head">
|
||||
<view class="certification_head_body">
|
||||
<view class="certification_head_body_item">
|
||||
<view class="icon iconfont icon-qiye"></view>
|
||||
<input type="text" name="store_name" v-model="form.store_name" placeholder='请输入店铺名称' />
|
||||
</view>
|
||||
<view class="certification_head_body_item">
|
||||
<view class="icon iconfont icon-ziyuan1"></view>
|
||||
<input type="text" name="user_name" v-model="form.user_name" placeholder='请输入真实姓名' />
|
||||
</view>
|
||||
<view class="certification_head_body_item">
|
||||
<view class="icon iconfont icon-phone"></view>
|
||||
<input type="text" name="mobile" v-model="form.mobile" placeholder='请输入手机号码' />
|
||||
<button type="default" v-if="sms_open == 1" :disabled="is_send" @click="getCode(form.mobile)">{{send_btn_txt}}</button>
|
||||
</view>
|
||||
<view class="certification_head_body_item">
|
||||
<view class="icon iconfont icon-mima"></view>
|
||||
<input type="text" name="password" v-model="form.password" password="true" placeholder='请输入登录密码' />
|
||||
</view>
|
||||
<view class="certification_head_body_item" v-if="sms_open == 1">
|
||||
<view class="icon iconfont icon-yanzhengma"></view>
|
||||
<input type="text" name="code" v-model="form.code" placeholder='请输入验证码' />
|
||||
</view>
|
||||
<picker class="" value="" @change="changeSelect($event)"
|
||||
:range="classify_data_name">
|
||||
<view class="certification_head_body_item d-b-c">
|
||||
<view class="make-item input-box flex-1" v-if="classify_data_name_active">{{classify_data_name_active}}</view>
|
||||
<view class="make-item input-box flex-1" style="color: #777777;" v-else>请选择您店铺的主营项目</view>
|
||||
<view class="icon iconfont icon-jiantou" style="font-size: 24rpx;"></view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="certification_body">
|
||||
<view class="login_index_updata_name">
|
||||
<text style="color:red;">*</text>
|
||||
<text style="font-size: 32rpx;font-weight: 500;color: #000000;">请上传营业执照</text>
|
||||
</view>
|
||||
<view class="login_index_updata_updata">
|
||||
<view class="login_index_updata_updata_item2" @click="openUpload('license')">
|
||||
<view class="login_index_updata_updata_item_body">
|
||||
<view v-if="business_id_path!=''" class="img">
|
||||
<image :src="business_id_path"></image>
|
||||
</view>
|
||||
<view v-if="business_id_path==''">点击上传营业执照</view>
|
||||
<input style="display:none" name="business_id" v-model="form.business_id" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="login_index_btn">
|
||||
<button form-type="submit" type="default">确定</button>
|
||||
</view>
|
||||
<Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">上传图片</Upload>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Upload from '@/components/upload/upload';
|
||||
export default {
|
||||
components: {
|
||||
/*编辑组件*/
|
||||
Upload
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
image_frontid: 0,
|
||||
business_id: 0,
|
||||
mobile: '',
|
||||
password: ''
|
||||
},
|
||||
isupload: false,
|
||||
type: 'frontid',
|
||||
image_frontid_path: '',
|
||||
business_id_path: '',
|
||||
bg_image: '',
|
||||
classify_data_name: '', //列表名字
|
||||
classify_data_id: '', //列表id
|
||||
classify_data_name_active: '', //当前选中的列表名字
|
||||
classify_data_id_active: '', //当前选中的列表id
|
||||
/*当前秒数*/
|
||||
second: 60,
|
||||
send_btn_txt: '获取验证码',
|
||||
/*是否已发验证码*/
|
||||
is_send: false,
|
||||
sms_open: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.get_classify();
|
||||
},
|
||||
methods: {
|
||||
/*改变发送验证码按钮文本*/
|
||||
changeMsg() {
|
||||
if (this.second > 0) {
|
||||
this.send_btn_txt = this.second + '秒';
|
||||
this.second--;
|
||||
setTimeout(this.changeMsg, 1000);
|
||||
} else {
|
||||
this.send_btn_txt = '获取验证码';
|
||||
this.second = 60;
|
||||
this.is_send = false;
|
||||
}
|
||||
},
|
||||
/*获取数据*/
|
||||
getData() {
|
||||
let self = this;
|
||||
self._get('user.index/detail', {
|
||||
|
||||
}, function(res) {
|
||||
self.bg_image = res.data.setting.supplier_image;
|
||||
});
|
||||
},
|
||||
//获取验证码
|
||||
getCode(mobile) {
|
||||
let self = this;
|
||||
self._post('supplier.apply/sendCode', {
|
||||
mobile: mobile
|
||||
}, function(res) {
|
||||
self.is_send = true;
|
||||
self.changeMsg();
|
||||
});
|
||||
},
|
||||
//获取分类
|
||||
get_classify() {
|
||||
let self = this;
|
||||
self._post('supplier.apply/category', {
|
||||
|
||||
}, function(res) {
|
||||
let list_name = [];
|
||||
let list_id = [];
|
||||
//合成select列表
|
||||
for (var i = 0; i < res.data.list.length; i++) {
|
||||
list_name.push(res.data.list[i].name);
|
||||
}
|
||||
//合成上传所需id数组
|
||||
for (var i2 = 0; i2 < res.data.list.length; i2++) {
|
||||
list_id.push(res.data.list[i2].category_id);
|
||||
}
|
||||
self.classify_data_name = list_name;
|
||||
self.classify_data_id = list_id;
|
||||
self.sms_open = res.data.sms_open;
|
||||
});
|
||||
},
|
||||
//选择分类
|
||||
select() {
|
||||
let self = this;
|
||||
uni.showActionSheet({
|
||||
itemList: self.classify_data_name,
|
||||
success: function(res) {
|
||||
self.classify_data_name_active = self.classify_data_name[res.tapIndex];
|
||||
self.classify_data_id_active = self.classify_data_id[res.tapIndex];
|
||||
},
|
||||
fail: function(res) {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
/*提交*/
|
||||
formSubmit: function(e) {
|
||||
let self = this;
|
||||
var formdata = e.detail.value;
|
||||
formdata.business_id = self.form.business_id;
|
||||
console.log(formdata)
|
||||
console.log(self.form)
|
||||
formdata.category_id = self.classify_data_id_active;
|
||||
if (self.classify_data_name_active == '') {
|
||||
uni.showToast({
|
||||
title: '请填主营类别',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (formdata.store_name == '') {
|
||||
uni.showToast({
|
||||
title: '请输入店铺名称',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (formdata.business_id == 0) {
|
||||
uni.showToast({
|
||||
title: '请上传营业执照',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (formdata.user_name == '') {
|
||||
uni.showToast({
|
||||
title: '请输入真实姓名',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (formdata.mobile == '') {
|
||||
uni.showToast({
|
||||
title: '请输入手机号码',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (formdata.code == '' && self.sms_open == 1) {
|
||||
uni.showToast({
|
||||
title: '请填写验证码',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (formdata.password == '') {
|
||||
uni.showToast({
|
||||
title: '请填写登录密码',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
|
||||
if (!reg.test(formdata.mobile)) {
|
||||
uni.showToast({
|
||||
title: '手机号码格式不正确',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '正在提交',
|
||||
mask: true
|
||||
})
|
||||
self._post('supplier.apply/index', formdata, function(res) {
|
||||
self.showSuccess(res.msg, function() {
|
||||
self.gotoPage('/pages/shop/application_status')
|
||||
}, null, function(){
|
||||
uni.hideLoading();
|
||||
});
|
||||
});
|
||||
},
|
||||
/*上传*/
|
||||
openUpload(e) {
|
||||
this.type = e;
|
||||
this.isupload = true;
|
||||
},
|
||||
|
||||
/*获取图片*/
|
||||
getImgsFunc(e) {
|
||||
console.log(e)
|
||||
if (e != null && e.length > 0) {
|
||||
if (this.type == 'frontid') {
|
||||
console.log(e[0].file_id);
|
||||
this.image_frontid_path = e[0].file_path;
|
||||
this.form.image_frontid = e[0].file_id;
|
||||
} else if (this.type == 'license') {
|
||||
console.log(e[0].file_id);
|
||||
this.business_id_path = e[0].file_path;
|
||||
this.form.business_id = e[0].file_id;
|
||||
}
|
||||
}
|
||||
this.isupload = false;
|
||||
},
|
||||
/* 下拉框 */
|
||||
changeSelect(e) {
|
||||
this.classify_data_id_active = this.classify_data_id[e.detail.value];
|
||||
this.classify_data_name_active = this.classify_data_name[e.detail.value];
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #FF3D19;
|
||||
}
|
||||
|
||||
.bg_image image{
|
||||
width: 100%;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.certification {
|
||||
width: 675rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 260rpx;
|
||||
left: 37.5rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.certification_head {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.certification_head_body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.certification_head_body_item {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
.certification_head_body_item view {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.certification_head_body_item button {
|
||||
width: 172rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border: 1rpx #E2231A solid;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
color: #E2231A;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.certification_body {}
|
||||
|
||||
.login_index_updata_name {
|
||||
margin-top: 28rpx;
|
||||
margin-left: 48rpx;
|
||||
}
|
||||
|
||||
.login_index_updata_updata {
|
||||
width: 90%;
|
||||
height: 360rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 35rpx;
|
||||
}
|
||||
|
||||
.login_index_updata_updata_item2 {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
border: 1rpx #9a9a9a dotted;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.login_index_updata_updata_item_body {
|
||||
width: 150rpx;
|
||||
height: 360rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img image {
|
||||
width: 554rpx;
|
||||
height: 360rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login_index_btn {
|
||||
position: relative;
|
||||
top: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.login_index_btn button {
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
background-color: #F36A24;
|
||||
border-radius: 50rpx;
|
||||
line-height: 80rpx;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.certification_rule {
|
||||
position: relative;
|
||||
left: 500rpx;
|
||||
top: -10rpx;
|
||||
}
|
||||
|
||||
.certification_rule text {
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.certification_rule image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.classify_text {
|
||||
color: #808080;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.select input {
|
||||
padding-left: 60rpx;
|
||||
color: #808080;
|
||||
}
|
||||
.make-item{
|
||||
padding-left: 60rpx;
|
||||
}
|
||||
</style>
|
||||
1297
pages/shop/shop.vue
Normal file
1297
pages/shop/shop.vue
Normal file
File diff suppressed because it is too large
Load Diff
584
pages/shop/shop_list.vue
Normal file
584
pages/shop/shop_list.vue
Normal file
@ -0,0 +1,584 @@
|
||||
<template>
|
||||
<view :data-theme="theme()" :class="theme() || ''">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<header-bar></header-bar>
|
||||
<!-- #endif -->
|
||||
<view class="top-box">
|
||||
<view class="index-search-box index-search-box_re d-b-c" id="searchBox">
|
||||
<view class="index-search index-search_re t-c flex-1">
|
||||
<span class="icon iconfont icon-sousuo"></span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchtxt"
|
||||
class="flex-1 ml10 f30 gray3"
|
||||
value=""
|
||||
placeholder-class="f24 gray6"
|
||||
placeholder="搜索店铺"
|
||||
confirm-type="search"
|
||||
@confirm="search()"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inner-tab">
|
||||
<view :class="type_active == 'all' ? 'item active' : 'item'" @click="tabTypeFunc('all')"><view class="box">综合</view></view>
|
||||
<view :class="type_active == 'sales' ? 'item active' : 'item'" @click="tabTypeFunc('sales')"><view class="box">销量</view></view>
|
||||
<view :class="type_active == 'score' ? 'item active' : 'item'" @click="tabTypeFunc('score')">
|
||||
<view class="box"><text>评分</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="prodcut-list-wrap">
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="scroll-Y"
|
||||
:style="'height:' + scrollviewHigh + 'px;'"
|
||||
lower-threshold="50"
|
||||
:refresher-triggered="triggered"
|
||||
@scrolltolower="scrolltolowerFunc"
|
||||
refresher-enabled="true"
|
||||
@refresherrefresh="onRefresh"
|
||||
@refresherrestore="onRestore"
|
||||
>
|
||||
<view class="shop_list_body">
|
||||
<view class="shop_list_body_item" v-for="(item, index) in shopData" :key="index">
|
||||
<view class="shop_list_body_item_shop" @click="goto_shop(item.shop_supplier_id)">
|
||||
<view class="shop_list_body_item_shop_logo"><image :src="item.logos"></image></view>
|
||||
<view class="shop_list_body_item_shop_info">
|
||||
<view class="h1 title">{{ item.name }}</view>
|
||||
<view class="h3 brand">主营品牌：{{ item.category_name }}</view>
|
||||
<view class="h3 sales">
|
||||
销量{{ item.product_sales }}件
|
||||
<text class="ml10 mr10">|</text>
|
||||
{{ item.fav_count }}人关注
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_list_body_item_shop_others">
|
||||
<view class="f26 gray3 collect">店铺评分</view>
|
||||
<view>
|
||||
<text class="redEe f32 fb">{{ item.server_score }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.productList.length > 0" :class="item.productList.length < 3 ? 'shop_list_body_item_product2' : 'shop_list_body_item_product'">
|
||||
<view class="shop_list_body_item_product_item" v-for="(pitem, index2) in item.productList" :key="index2" @click="goto_product(pitem.product_id)">
|
||||
<view><image :src="pitem.image[0].file_path"></image></view>
|
||||
<view class="shop_list_body_item_product_item_price">
|
||||
<view class="f22 red">
|
||||
¥
|
||||
<text class="f32">{{ pitem.product_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 没有记录 -->
|
||||
<view class="d-c-c p30" v-if="shopData.length == 0 && !loading">
|
||||
<text class="iconfont icon-wushuju"></text>
|
||||
<text class="cont">亲，暂无相关记录哦</text>
|
||||
</view>
|
||||
<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<tabBar></tabBar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniLoadMore from '@/components/uni-load-more.vue';
|
||||
export default {
|
||||
components: {
|
||||
uniLoadMore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
triggered: true,
|
||||
/*手机高度*/
|
||||
phoneHeight: 0,
|
||||
/*可滚动视图区域高度*/
|
||||
scrollviewHigh: 0,
|
||||
/*状态选中*/
|
||||
state_active: -1,
|
||||
no_more: false,
|
||||
loading: true,
|
||||
/*最后一页码数*/
|
||||
last_page: 0,
|
||||
/*当前页面*/
|
||||
page: 1,
|
||||
/*每页条数*/
|
||||
list_rows: 10,
|
||||
/*顶部刷新*/
|
||||
topRefresh: false,
|
||||
/*类别选中*/
|
||||
type_active: 'all',
|
||||
/*价格选中*/
|
||||
price_top: false,
|
||||
/*店铺列表*/
|
||||
shopData: [],
|
||||
/*当前页面*/
|
||||
searchtxt: '',
|
||||
keyWord: '',
|
||||
stateTab: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/*加载中状态*/
|
||||
loadingType() {
|
||||
if (this.loading) {
|
||||
return 1;
|
||||
} else {
|
||||
if (this.shopData.length != 0 && this.no_more) {
|
||||
return 2;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getTabBarLinks();
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this._freshing = false;
|
||||
this.restoreData();
|
||||
/*获取订单列表*/
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/*初始化*/
|
||||
init() {
|
||||
let self = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
self.phoneHeight = res.windowHeight;
|
||||
// 计算组件的高度
|
||||
let view = uni
|
||||
.createSelectorQuery()
|
||||
.in(self)
|
||||
.select('.top-box');
|
||||
view.boundingClientRect(data => {
|
||||
console.log(data);
|
||||
let h = self.phoneHeight - data.height;
|
||||
self.scrollviewHigh = h;
|
||||
}).exec();
|
||||
}
|
||||
});
|
||||
},
|
||||
/*还原初始化*/
|
||||
restoreData() {
|
||||
this.shopData = [];
|
||||
this.page = 1;
|
||||
this.no_more = false;
|
||||
this.loading = true;
|
||||
this.category_id = 0;
|
||||
this.searchtxt = '';
|
||||
this.sortType = '';
|
||||
this.sortPrice = 0;
|
||||
},
|
||||
/*类别切换*/
|
||||
tabTypeFunc(e) {
|
||||
let self = this;
|
||||
self.shopData = [];
|
||||
self.page = 1;
|
||||
self.no_more = false;
|
||||
self.loading = true;
|
||||
self.type_active = e;
|
||||
self.getData();
|
||||
},
|
||||
|
||||
/*获取数据*/
|
||||
getData() {
|
||||
let self = this;
|
||||
let page = self.page;
|
||||
let list_rows = self.list_rows;
|
||||
self.loading = true;
|
||||
self._post(
|
||||
'supplier.index/list',
|
||||
{
|
||||
page: page || 1,
|
||||
list_rows: list_rows,
|
||||
sortType: self.type_active,
|
||||
name: self.keyWord
|
||||
},
|
||||
res => {
|
||||
self.loading = false;
|
||||
self.last_page = res.data.list.last_page;
|
||||
self.shopData = self.shopData.concat(res.data.list.data);
|
||||
if (res.data.list.last_page <= 1) {
|
||||
self.no_more = true;
|
||||
} else {
|
||||
self.no_more = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
onRefresh() {
|
||||
if (this._freshing) return;
|
||||
this._freshing = true;
|
||||
this.restoreData();
|
||||
this.getData();
|
||||
setTimeout(() => {
|
||||
this.triggered = false;
|
||||
this._freshing = false;
|
||||
}, 2000);
|
||||
},
|
||||
onRestore() {
|
||||
this.triggered = 'restore'; // 需要重置
|
||||
},
|
||||
/*搜索*/
|
||||
search() {
|
||||
let self = this;
|
||||
self.keyWord = self.searchtxt;
|
||||
self.restoreData();
|
||||
self.getData();
|
||||
},
|
||||
/*可滚动视图区域到底触发*/
|
||||
scrolltolowerFunc() {
|
||||
let self = this;
|
||||
if (self.no_more) {
|
||||
return;
|
||||
}
|
||||
self.page++;
|
||||
if (self.page <= self.last_page) {
|
||||
self.getData();
|
||||
} else {
|
||||
self.no_more = true;
|
||||
}
|
||||
},
|
||||
|
||||
//跳转店铺首页
|
||||
goto_shop(shop_supplier_id) {
|
||||
this.gotoPage('/pages/shop/shop?shop_supplier_id=' + shop_supplier_id);
|
||||
},
|
||||
//跳转商品页面
|
||||
goto_product(product_id) {
|
||||
this.gotoPage('/pages/product/detail/detail?product_id=' + product_id);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.foot_ {
|
||||
height: 98rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.seacth {
|
||||
width: 750rpx;
|
||||
height: 110rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.seacth input {
|
||||
width: 675rpx;
|
||||
height: 70rpx;
|
||||
border: 1px #d7d7d7 solid;
|
||||
border-radius: 20rpx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20rpx;
|
||||
font-size: 24rpx !important;
|
||||
}
|
||||
|
||||
.seacth input::before {
|
||||
margin-right: 10rpx;
|
||||
font-size: 24rpx !important;
|
||||
}
|
||||
|
||||
.inner-tab {
|
||||
position: relative;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.inner-tab .item {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
height: 100%;
|
||||
line-height: 80rpx;
|
||||
position: relative;
|
||||
color: #666666;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.inner-tab .item.active,
|
||||
.inner-tab .item .arrow.active .iconfont {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.inner-tab .item.active::after {
|
||||
content: '';
|
||||
width: 72rpx;
|
||||
height: 4rpx;
|
||||
@include background_color('background_color');
|
||||
border-radius: 2rpx;
|
||||
position: absolute;
|
||||
bottom: 14rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.inner-tab .item .box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.inner-tab .item .arrows {
|
||||
margin-left: 10rpx;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.inner-tab .item .iconfont {
|
||||
line-height: 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.inner-tab .item .arrow,
|
||||
.inner-tab .item .svg-icon {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap {
|
||||
// padding-bottom: 98rpx;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .list {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .list .item {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
border-bottom: 16rpx solid #f6f6f6;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .product-cover,
|
||||
.prodcut-list-wrap .product-cover image {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .product-info {
|
||||
flex: 1;
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .product-title {
|
||||
display: -webkit-box;
|
||||
line-height: 40rpx;
|
||||
height: 80rpx;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .already-sale {
|
||||
margin-top: 20rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .already-sale > text {
|
||||
padding: 6rpx 10rpx;
|
||||
background-color: #f2f2f7;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .price {
|
||||
@include font_color('price_color');
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.prodcut-list-wrap .price .num {
|
||||
margin-left: 6rpx;
|
||||
padding: 0 4rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
// *********************
|
||||
// *********************
|
||||
.h1 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.h6 {
|
||||
font-size: 12rpx;
|
||||
}
|
||||
|
||||
.huaxianjia {
|
||||
text-decoration: line-through;
|
||||
color: #585858;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.shop_list_body {
|
||||
width: 100%;
|
||||
// padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shop_list_body_item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-height: 470rpx;
|
||||
margin-top: 30rpx;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
// border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
// border-bottom: 2rpx #e8e8e8 solid;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shop_list_body_item_shop {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.shop_list_body_item_shop_logo {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.shop_list_body_item_shop_logo image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.shop_list_body_item_shop_info {
|
||||
padding: 10rpx;
|
||||
padding-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.shop_list_body_item_shop_others {
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop_list_body_item_product {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// background-color: #f2f2f2;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
// border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.shop_list_body_item_product2 {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// background-color: #f2f2f2;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.shop_list_body_item_product2 .shop_list_body_item_product_item {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.shop_list_body_item_product_item {
|
||||
width: 30%;
|
||||
background-color: white;
|
||||
// border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shop_list_body_item_product_item image {
|
||||
width: 210rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.shop_list_body_item_product_item view {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shop_list_body_item_product_item_price {
|
||||
padding: 15rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: relative;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.sales {
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.collect {
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user