合并部分页面
This commit is contained in:
唐明明
222
pages/certification/personal.vue
Normal file
222
pages/certification/personal.vue
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<view class="sub-title">
|
||||||
|
<text>请正确填写你的个人身份信息</text>
|
||||||
|
</view>
|
||||||
|
<!-- 填写姓名 -->
|
||||||
|
<view class="password">
|
||||||
|
<view class="group">
|
||||||
|
<view class="inputs">
|
||||||
|
<label>真实姓名</label>
|
||||||
|
<input type="text" v-model="nikcName" placeholder="请输入您的真实姓名" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>身份证件号</label>
|
||||||
|
<input type="idcard" v-model="idcardNo" placeholder="请输入身份证件号码" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 上传证件号 -->
|
||||||
|
<view class="idcard-flex">
|
||||||
|
<view class="idcard-item">
|
||||||
|
<view class="idcard-title">
|
||||||
|
<text>上传身份证正面</text>
|
||||||
|
</view>
|
||||||
|
<view class="idcard-block positive">
|
||||||
|
<image :src="positive" mode="aspectFit" @click="upload('positive')"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="idcard-item">
|
||||||
|
<view class="idcard-title">
|
||||||
|
<text>上传身份证背面</text>
|
||||||
|
</view>
|
||||||
|
<view class="idcard-block reverse">
|
||||||
|
<image :src="reverse" mode="aspectFit" @click="upload('reverse')" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<view class="buttons">
|
||||||
|
<button type="default" @click="submitPersonal">提交认证信息</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import uploading from '@/apis/oss'
|
||||||
|
import { personal } from '@/apis/interfaces/certification'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
positive: '',
|
||||||
|
reverse: '',
|
||||||
|
nikcName: '',
|
||||||
|
idcardNo: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 创建钱包
|
||||||
|
submitPersonal(){
|
||||||
|
if(this.nikcName === '' || this.idcardNo === ''){
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '真实姓名或身份证号不能为空'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
personal({
|
||||||
|
name: this.nikcName,
|
||||||
|
id_card: this.idcardNo
|
||||||
|
}).then(res=>{
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '您的身份认证已完成，是否立即激活钱包~',
|
||||||
|
confirmText: '立即激活',
|
||||||
|
confirmColor: '#009B69',
|
||||||
|
cancelColor: '#666666',
|
||||||
|
cancelText: '稍后激活',
|
||||||
|
success: res=> {
|
||||||
|
if(res.confirm) {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '../wallet/mnemonic'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(res.cancel) {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 上传身份证
|
||||||
|
upload(type){
|
||||||
|
uni.chooseImage({
|
||||||
|
success(files){
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '暂未开放'
|
||||||
|
})
|
||||||
|
// let filesArr = files.tempFilePaths.map(val => {
|
||||||
|
// return {
|
||||||
|
// uri: val
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// uploading(filesArr)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 副标题
|
||||||
|
.sub-title{
|
||||||
|
color: $text-gray;
|
||||||
|
text-align: center;
|
||||||
|
margin: $margin * 2 $margin;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
// 上传证件
|
||||||
|
.idcard-flex{
|
||||||
|
display: flex;
|
||||||
|
padding: ($padding*2) $padding 0;
|
||||||
|
.idcard-item{
|
||||||
|
margin: 0 $margin;
|
||||||
|
width: calc(50% - #{$margin * 2});
|
||||||
|
.idcard-title{
|
||||||
|
text-align: center;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
}
|
||||||
|
.idcard-block{
|
||||||
|
position: relative;
|
||||||
|
border-radius: $radius-m;
|
||||||
|
box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
|
||||||
|
background-color: white;
|
||||||
|
padding-top: 63%;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 36%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
overflow: hidden;
|
||||||
|
&.positive{
|
||||||
|
background-image: url(../../static/background/idcard-positive.png);
|
||||||
|
}
|
||||||
|
&.reverse{
|
||||||
|
background-image: url(../../static/background/idcard-reverse.png);
|
||||||
|
}
|
||||||
|
image{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 身份信息
|
||||||
|
.password{
|
||||||
|
padding: 0 $padding * 2;
|
||||||
|
.prompt{
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $mian-color;
|
||||||
|
}
|
||||||
|
.group{
|
||||||
|
margin-top: $margin;
|
||||||
|
border-radius: $radius-m;
|
||||||
|
box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
|
||||||
|
background-color: white;
|
||||||
|
.inputs{
|
||||||
|
padding: $padding $padding + 10;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
&:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 按钮
|
||||||
|
.buttons{
|
||||||
|
padding: $padding * 2;
|
||||||
|
.text{
|
||||||
|
text-align: center;
|
||||||
|
line-height: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
margin-bottom: $margin * 2;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $mian-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
background-color: $mian-color;
|
||||||
|
border-radius: $radius-lg;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
359
pages/company/approve.vue
Normal file
359
pages/company/approve.vue
Normal file
@@ -0,0 +1,359 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="header">
|
||||||
|
<view class="title">企业认证</view>
|
||||||
|
<view class="subtitle">请如实填写认证信息，快速审核开店</view>
|
||||||
|
</view>
|
||||||
|
<view class="white-box">
|
||||||
|
<view class="inputs logo">
|
||||||
|
<label>企业LOGO</label>
|
||||||
|
<image class="logo-cover" :src="logo.showpath || require('@/static/icons/add-icon.png')" @click="updImg('logo')" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>企业名称</label>
|
||||||
|
<input type="text" v-model="name" placeholder="输入企业名称" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>企业行业</label>
|
||||||
|
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry">
|
||||||
|
<view class="picker-text nowrap">
|
||||||
|
{{industry[industryIndex].title}}
|
||||||
|
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>经营类目</label>
|
||||||
|
<view class="picker-text nowrap" @click="opnePopup">
|
||||||
|
<block v-if="categorys.length > 0">
|
||||||
|
<text class="text-item" v-for="(item, index) in category" :key="index" v-if="item.check">{{item.name}}</text>
|
||||||
|
</block>
|
||||||
|
<block v-else>选择经营类目</block>
|
||||||
|
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>法人姓名</label>
|
||||||
|
<input type="text" v-model="corporate" placeholder="输入法人姓名" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>法人身份证</label>
|
||||||
|
<input type="text" v-model="identity" placeholder="输入法人身份证" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>机构代码</label>
|
||||||
|
<input type="text" v-model="org" placeholder="输入企业组织机构代码" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs logo">
|
||||||
|
<label>营业执照</label>
|
||||||
|
<image class="license-cover" :src="license.showpath || require('@/static/icons/add-icon.png')" @click="updImg('license')" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="btns">
|
||||||
|
<button type="default" size="default" @click="submitApplies">提交认证</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 经营类目 -->
|
||||||
|
<uni-popup ref="categoryPopup">
|
||||||
|
<view class="category-popup">
|
||||||
|
<view class="header">
|
||||||
|
<view class="title">经营类目</view>
|
||||||
|
<view class="subtitle">请选择经营类目</view>
|
||||||
|
</view>
|
||||||
|
<view class="category-flex">
|
||||||
|
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in category" :key="index" @click="item.check = !item.check">{{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="btns">
|
||||||
|
<button type="default" size="default" @click="affirmCategory">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { appliesCreate, applies, appliesInfo, appliesCategory } from '@/apis/interfaces/company'
|
||||||
|
import { uploads } from '@/apis/interfaces/uploading'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formType : "",
|
||||||
|
name : "",
|
||||||
|
corporate : "",
|
||||||
|
identity : "",
|
||||||
|
org : "",
|
||||||
|
logo : {
|
||||||
|
showpath: '',
|
||||||
|
path : ''
|
||||||
|
},
|
||||||
|
license : {
|
||||||
|
showpath: '',
|
||||||
|
path : ''
|
||||||
|
},
|
||||||
|
industry : [],
|
||||||
|
industryIndex: 0,
|
||||||
|
reason : '',
|
||||||
|
category : [],
|
||||||
|
categorys : []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
// 读取配置信息
|
||||||
|
appliesCreate().then(res=>{
|
||||||
|
console.log(res)
|
||||||
|
this.industry = res.industries
|
||||||
|
this.formType = this.$Route.query.formType
|
||||||
|
this.name = res.info.name
|
||||||
|
this.industryIndex = res.industries.findIndex(val => val.industry_id === res.info.industry.industry_id) || 0
|
||||||
|
if(this.formType === 'put'){
|
||||||
|
appliesInfo().then(formValue => {
|
||||||
|
for(let val of formValue.categories){
|
||||||
|
if(val.check){
|
||||||
|
this.categorys.push(val.category_id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.category = formValue.categories
|
||||||
|
this.corporate = formValue.certification.name
|
||||||
|
this.identity = formValue.certification.idcard
|
||||||
|
this.org = formValue.certification.code
|
||||||
|
this.logo = formValue.cover
|
||||||
|
this.license = formValue.certification.license
|
||||||
|
}).catch(valueErr => {
|
||||||
|
uni.showToast({
|
||||||
|
title: valueErr.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
this.category = res.info.categories
|
||||||
|
}
|
||||||
|
}).catch(err =>{
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 选择经营类目
|
||||||
|
opnePopup(){
|
||||||
|
this.$refs.categoryPopup.open('bottom')
|
||||||
|
},
|
||||||
|
// 确认选择类目
|
||||||
|
affirmCategory(){
|
||||||
|
this.categorys = []
|
||||||
|
for(let val of this.category){
|
||||||
|
if(val.check){
|
||||||
|
this.categorys.push(val.category_id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$refs.categoryPopup.close()
|
||||||
|
},
|
||||||
|
// 提交信息
|
||||||
|
submitApplies(){
|
||||||
|
let method = this.formType === 'put' ? 'PUT' : 'POST'
|
||||||
|
applies({
|
||||||
|
name : this.name,
|
||||||
|
cover : this.logo.path,
|
||||||
|
license : this.license.path,
|
||||||
|
user_name : this.corporate,
|
||||||
|
id_card : this.identity,
|
||||||
|
code : this.org,
|
||||||
|
industry_id : this.industry[this.industryIndex].industry_id,
|
||||||
|
categories : this.categorys
|
||||||
|
}, method).then(res => {
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : '您的企业认证信息已提交，审核需3-7个工作日，请耐心等待',
|
||||||
|
showCancel : false,
|
||||||
|
confirmText : '确认',
|
||||||
|
success : resModal => {
|
||||||
|
this.$Router.back()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择器
|
||||||
|
changePicker(e){
|
||||||
|
this.industryIndex = e.detail.value
|
||||||
|
appliesCategory({
|
||||||
|
industry: this.industry[e.detail.value].industry_id,
|
||||||
|
}).then(res => {
|
||||||
|
this.category = res
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传图片
|
||||||
|
updImg(type){
|
||||||
|
uni.chooseImage({
|
||||||
|
count : 1,
|
||||||
|
success : path => {
|
||||||
|
uploads([{
|
||||||
|
uri : path.tempFilePaths[0]
|
||||||
|
}]).then(res => {
|
||||||
|
this[type] = {
|
||||||
|
showpath: res.url[0],
|
||||||
|
path: res.path[0]
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 内容
|
||||||
|
.content{
|
||||||
|
.header{
|
||||||
|
height: 15vh;
|
||||||
|
padding-bottom: $padding * 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@extend .vertical;
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size + 14;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
.subtitle{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.white-box{
|
||||||
|
background-color: white;
|
||||||
|
border-radius: $radius $radius 0 0;
|
||||||
|
min-height: 85vh;
|
||||||
|
padding: $padding $padding * 2 $padding * 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.inputs{
|
||||||
|
position: relative;
|
||||||
|
margin-top: $margin;
|
||||||
|
background: white;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
padding-left: 200rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
min-height: 90rpx;
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
.picker-text{
|
||||||
|
position: relative;
|
||||||
|
padding-right: 90rpx;
|
||||||
|
.picker-icon{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.text-item{
|
||||||
|
margin-left: 10rpx;
|
||||||
|
&:first-child{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.logo{
|
||||||
|
min-height: 98rpx;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
.logo-cover{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 98rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
background: $border-color-lg;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.license-cover{
|
||||||
|
@extend .logo-cover;
|
||||||
|
border-radius: 0;
|
||||||
|
width: 131rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
padding-top: $padding * 2;
|
||||||
|
button{
|
||||||
|
background: $text-price;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 经营类目
|
||||||
|
.category-popup{
|
||||||
|
background: #F5F5F5;
|
||||||
|
padding: 0 $padding * 2 $padding * 2 $padding * 2;
|
||||||
|
.header{
|
||||||
|
padding-bottom: $padding;
|
||||||
|
}
|
||||||
|
.category-flex{
|
||||||
|
margin: 0 -10rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.category-flex-item{
|
||||||
|
margin: 10rpx;
|
||||||
|
background: white;
|
||||||
|
width: calc(33.33% - 20rpx);
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
@extend .nowrap;
|
||||||
|
&.show{
|
||||||
|
color: white;
|
||||||
|
background-color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
padding-top: $padding * 2;
|
||||||
|
button{
|
||||||
|
background: $text-price;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
62
pages/company/prompt.vue
Normal file
62
pages/company/prompt.vue
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<image class="cover" src="@/static/dev/guide_cover_00.png" mode="widthFix"></image>
|
||||||
|
<view class="title">恭喜您，已注册成功</view>
|
||||||
|
<view class="sub-title">开通会员认证企业信息立即获得授信易货额，即可开始易货之旅</view>
|
||||||
|
<button class="vip-button" type="default" @click="$Router.push({name: 'Vip'})">开通会员</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onNavigationBarButtonTap(e){
|
||||||
|
this.$Router.pushTab({name: "Equity"})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
padding: $padding * 2;
|
||||||
|
background: white;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@extend .vertical;
|
||||||
|
text-align: center;
|
||||||
|
.cover{
|
||||||
|
width: 46vw;
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: $title-size + 14;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-button{
|
||||||
|
margin-top: 10vh;
|
||||||
|
background: $text-price;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
147
pages/company/registered.vue
Normal file
147
pages/company/registered.vue
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="header">
|
||||||
|
<view class="title">企业注册</view>
|
||||||
|
<view class="subtitle">填写企业基础行业，获取企业/商家权益</view>
|
||||||
|
</view>
|
||||||
|
<view class="white-box">
|
||||||
|
<view class="inputs">
|
||||||
|
<label>企业名称</label>
|
||||||
|
<input type="text" v-model="name" placeholder="输入企业名称" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label>企业行业</label>
|
||||||
|
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry">
|
||||||
|
<view class="picker-text nowrap">
|
||||||
|
{{industry[industryIndex].title}}
|
||||||
|
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="btns">
|
||||||
|
<button type="default" size="default" @click="next">下一步</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createConfig, inits } from '@/apis/interfaces/company'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name : "",
|
||||||
|
industry : [],
|
||||||
|
industryIndex: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
createConfig().then(res=>{
|
||||||
|
this.industry = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 提交信息
|
||||||
|
next(){
|
||||||
|
inits({
|
||||||
|
name : this.name,
|
||||||
|
industry_id : this.industry[this.industryIndex].industry_id
|
||||||
|
}).then(res => {
|
||||||
|
this.$Router.push({name: 'Prompt'})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//选择器
|
||||||
|
changePicker(e){
|
||||||
|
let changeType = e.target.dataset.type,
|
||||||
|
changeVlae = e.detail.value
|
||||||
|
|
||||||
|
switch(changeType){
|
||||||
|
case 'type':
|
||||||
|
this.typeIndex = changeVlae
|
||||||
|
break
|
||||||
|
case 'industry':
|
||||||
|
this.industryIndex = changeVlae
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
.header{
|
||||||
|
height: 20vh;
|
||||||
|
@extend .vertical;
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size + 14;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
.subtitle{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.white-box{
|
||||||
|
background-color: white;
|
||||||
|
border-radius: $radius $radius 0 0;
|
||||||
|
min-height: 80vh;
|
||||||
|
padding: $padding * 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.inputs{
|
||||||
|
position: relative;
|
||||||
|
margin-top: $margin;
|
||||||
|
background: white;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
padding-left: 200rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
min-height: 90rpx;
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
.picker-text{
|
||||||
|
position: relative;
|
||||||
|
padding-right: 90rpx;
|
||||||
|
.picker-icon{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
padding-top: $padding * 2;
|
||||||
|
button{
|
||||||
|
background: $text-price;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
413
pages/coupons/add.vue
Normal file
413
pages/coupons/add.vue
Normal file
@@ -0,0 +1,413 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="coupons-preview">
|
||||||
|
<view class="item cover">
|
||||||
|
<view v-if="types[typeIndex].id == 2">
|
||||||
|
<view class="cover-price">{{price || 0}}<text>元</text></view>
|
||||||
|
<view class="cover-subtitle">代金券</view>
|
||||||
|
</view>
|
||||||
|
<view @click="updCover" v-else>
|
||||||
|
<image class="cover-img" v-if="cover != ''" :src="cover" mode="aspectFill" />
|
||||||
|
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item mian">
|
||||||
|
<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
|
||||||
|
<block v-if="timeIndex == 0">
|
||||||
|
<view class="time nowrap">{{datePickerValue.length == 0 ? '有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="time nowrap">领取后{{timeNumber}}天内有效</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="add-info">
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">券类型</label>
|
||||||
|
<picker :range="types" range-key="text" :value="typeIndex" data-type="typeIndex" @change="changePicker">
|
||||||
|
<view class="input-text">{{types[typeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">券标题</label>
|
||||||
|
<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">发券数量</label>
|
||||||
|
<view class="input-number">
|
||||||
|
<uni-number-box class="number" :min="1" :max="9999" :value="quantity" @change="quantityChange"></uni-number-box>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">每人限领</label>
|
||||||
|
<view class="input-number">
|
||||||
|
<uni-number-box class="number" :min="1" :max="quantity" :value="personQuantity" @change="personQuantityChange"></uni-number-box>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<block v-if="types[typeIndex].id == 2">
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">满</label>
|
||||||
|
<input type="digit" v-model="full" placeholder="输入券最低消费金额" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">减</label>
|
||||||
|
<input type="digit" v-model="price" placeholder="输入券优惠金额" />
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">使用渠道</label>
|
||||||
|
<view class="input-checkbox">
|
||||||
|
<radio-group @change="radioChange">
|
||||||
|
<label class="input-checkbox-item">
|
||||||
|
<radio color="#e93340" value="1" checked/>
|
||||||
|
<text>线上优惠</text>
|
||||||
|
</label>
|
||||||
|
<label class="input-checkbox-item">
|
||||||
|
<radio color="#e93340" value="2"/>
|
||||||
|
<text>线下活动</text>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">时间类型</label>
|
||||||
|
<picker :range="times" range-key="text" :value="timeIndex" data-type="timeIndex" @change="changePicker">
|
||||||
|
<view class="input-text">{{times[timeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">{{timeIndex == 0 ? '券有效期': '延期天数'}}</label>
|
||||||
|
<block v-if="timeIndex === 0">
|
||||||
|
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期区间': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||||
|
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#e93340" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
|
||||||
|
</block>
|
||||||
|
<block v-if="timeIndex === 1">
|
||||||
|
<view class="input-number">
|
||||||
|
<uni-number-box class="number" :min="1" :value="timeNumber" @change="timeNumberChange"></uni-number-box>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="inputs">
|
||||||
|
<label class="input-label">关联商品</label>
|
||||||
|
<view class="input-text" @click="onSelectGoods">
|
||||||
|
<block v-if="coupongoods.length > 0">已关联{{coupongoods.length}}件商品</block>
|
||||||
|
<block v-else>选择关联商品</block>
|
||||||
|
<uni-icons class="picker-icon" type="arrowdown" size="14" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="add-textarea">
|
||||||
|
<label>使用规则</label>
|
||||||
|
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
|
||||||
|
</view>
|
||||||
|
<view class="add-btn ios-bottom">
|
||||||
|
<button type="default" @click="updComponent">发布优惠券</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TnDatePicker from "@/components/tn-datepicker/tn-datepicker";
|
||||||
|
import { uploads } from '@/apis/interfaces/uploading'
|
||||||
|
import { pushCoupons } from '@/apis/interfaces/coupons'
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
TnDatePicker
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
typeIndex : 0,
|
||||||
|
types : [
|
||||||
|
{ id: 1, text: '服务券' },
|
||||||
|
{ id: 2, text: '代金券' },
|
||||||
|
{ id: 3, text: '提货券' },
|
||||||
|
],
|
||||||
|
timeIndex : 0,
|
||||||
|
times : [
|
||||||
|
{ type: 2, text: '固定时间（区间范围）' },
|
||||||
|
{ type: 1, text: '延期券（用户领取后有效天数）' }
|
||||||
|
],
|
||||||
|
showDatePicker : false, // 活动弹出层时间
|
||||||
|
datePickerValue : [], // 活动时间
|
||||||
|
cover : '', // 优惠券图标
|
||||||
|
useWay : 1, // 使用途径
|
||||||
|
couponsTitle : '', // 优惠券标题
|
||||||
|
quantity : 1, // 发券数量
|
||||||
|
personQuantity : 1, // 每人限领
|
||||||
|
full : '', // 满足金额
|
||||||
|
price : '', // 减少金额
|
||||||
|
description : '', // 使用规则
|
||||||
|
coupongoods : [], // 关联商品
|
||||||
|
timeNumber : 1 // 延期券时间
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
this.coupongoods = this.$store.getters.getCoupongoods
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 发券数量
|
||||||
|
quantityChange(value){
|
||||||
|
this.quantity = value
|
||||||
|
},
|
||||||
|
// 每人限领
|
||||||
|
personQuantityChange(value){
|
||||||
|
this.personQuantity = value
|
||||||
|
},
|
||||||
|
// 延期券时间
|
||||||
|
timeNumberChange(value){
|
||||||
|
this.timeNumber = value
|
||||||
|
},
|
||||||
|
// 使用渠道
|
||||||
|
radioChange(e){
|
||||||
|
this.useWay = e.detail.value
|
||||||
|
},
|
||||||
|
// 选择
|
||||||
|
changePicker(e){
|
||||||
|
this[e.target.dataset.type] = e.detail.value
|
||||||
|
},
|
||||||
|
// 日期
|
||||||
|
confirmDatePicker(e){
|
||||||
|
this.datePickerValue = e.value
|
||||||
|
this.showDatePicker = false
|
||||||
|
},
|
||||||
|
// 上传优惠券封面
|
||||||
|
updCover(){
|
||||||
|
uni.chooseImage({
|
||||||
|
crop: {width: 300, height: 300},
|
||||||
|
success: path=> {
|
||||||
|
uploads([{
|
||||||
|
uri : path.tempFilePaths[0]
|
||||||
|
}]).then(res => {
|
||||||
|
this.cover = res.url[0]
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 选择关联商品
|
||||||
|
onSelectGoods(){
|
||||||
|
this.$Router.push({name: 'selectGoods', params: {type: this.types[this.typeIndex].id}})
|
||||||
|
},
|
||||||
|
// 发布优惠券
|
||||||
|
updComponent(){
|
||||||
|
let valuss = {
|
||||||
|
title : this.couponsTitle,
|
||||||
|
cover : this.cover,
|
||||||
|
type : this.types[this.typeIndex].id,
|
||||||
|
full : this.full || 0,
|
||||||
|
price : this.price || 0,
|
||||||
|
quantity : this.quantity,
|
||||||
|
use_way : this.useWay,
|
||||||
|
person_quantity : this.personQuantity,
|
||||||
|
start_at : this.datePickerValue[0],
|
||||||
|
end_at : this.datePickerValue[1],
|
||||||
|
description : this.description,
|
||||||
|
time_type : this.times[this.typeIndex].type,
|
||||||
|
days : this.timeNumber,
|
||||||
|
goodsable_ids : this.coupongoods
|
||||||
|
}
|
||||||
|
|
||||||
|
pushCoupons(valuss).then(res => {
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : res,
|
||||||
|
showCancel : false,
|
||||||
|
confirmText : '确定',
|
||||||
|
confirmColor: '#e93340',
|
||||||
|
success : modalRes => {
|
||||||
|
this.$store.commit('setCoupongoods', [])
|
||||||
|
this.$Router.back()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.add-btn{
|
||||||
|
padding: $padding;
|
||||||
|
button{
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 0;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 优惠券详情
|
||||||
|
.add-textarea{
|
||||||
|
background: white;
|
||||||
|
margin-top: $margin;
|
||||||
|
padding: $padding $padding $padding ($padding + 180rpx);
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
line-height: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
textarea{
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 40rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 优惠券配置
|
||||||
|
.add-info{
|
||||||
|
background-color: white;
|
||||||
|
padding: 0 $padding;
|
||||||
|
.inputs{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 180rpx;
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
height: 1rpx;
|
||||||
|
content: " ";
|
||||||
|
background: $border-color;
|
||||||
|
left: 0;
|
||||||
|
right: -$padding;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
&:last-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.input-label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
line-height: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
.input-text,
|
||||||
|
input{
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
.input-text{
|
||||||
|
position: relative;
|
||||||
|
padding-right: 90rpx;
|
||||||
|
.picker-icon{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-number{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
.input-checkbox{
|
||||||
|
min-height: 90rpx;
|
||||||
|
display: flex;
|
||||||
|
.input-checkbox-item{
|
||||||
|
line-height: 90rpx;
|
||||||
|
margin-right: $margin;
|
||||||
|
radio{
|
||||||
|
transform:scale(0.8);
|
||||||
|
margin-right: -15rpx;
|
||||||
|
}
|
||||||
|
text{
|
||||||
|
padding: 0 ($padding/2);
|
||||||
|
line-height: 50rpx;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inputs{}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 发布预览
|
||||||
|
.coupons-preview{
|
||||||
|
background: white;
|
||||||
|
margin: $margin;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: $padding 0;
|
||||||
|
.item{
|
||||||
|
position: relative;
|
||||||
|
padding: 0 $padding;
|
||||||
|
}
|
||||||
|
.cover{
|
||||||
|
position: relative;
|
||||||
|
border-right: dashed 3rpx $border-color;
|
||||||
|
width: 148rpx;
|
||||||
|
text-align: center;
|
||||||
|
.cover-img{
|
||||||
|
width: 148rpx;
|
||||||
|
height: 148rpx;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
vertical-align: top;
|
||||||
|
background: $border-color-lg;
|
||||||
|
border:solid 1rpx $border-color;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.cover-price{
|
||||||
|
padding-top: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 58rpx;
|
||||||
|
font-size: $title-size + 10;
|
||||||
|
color: $text-price;
|
||||||
|
text{
|
||||||
|
font-size: 70%;
|
||||||
|
padding-left: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cover-subtitle{
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
}
|
||||||
|
&::after,&::before{
|
||||||
|
position: absolute;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: #f8f8f8;
|
||||||
|
content: " ";
|
||||||
|
right: -16rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
top: -($padding + 15);
|
||||||
|
}
|
||||||
|
&::before{
|
||||||
|
bottom: -($padding + 15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mian{
|
||||||
|
justify-content: center;
|
||||||
|
width: calc(100% - 148rpx - #{$padding*2});
|
||||||
|
box-sizing: border-box;
|
||||||
|
@extend .vertical;
|
||||||
|
.title{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
.time, .goods{
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
852
pages/coupons/couponList.vue
Normal file
852
pages/coupons/couponList.vue
Normal file
File diff suppressed because one or more lines are too long
19
pages/coupons/index.vue
Normal file
19
pages/coupons/index.vue
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
优惠券
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
269
pages/coupons/magDetails.vue
Normal file
269
pages/coupons/magDetails.vue
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content" v-if="!isLoding">
|
||||||
|
<view class="details">
|
||||||
|
<view class="header">
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">优惠券标题</view>
|
||||||
|
<view class="info-item-text">{{details.title}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">优惠券类型</view>
|
||||||
|
<view class="info-item-text">{{details.type.text}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">上架状态</view>
|
||||||
|
<view class="info-item-text">已{{details.status.text}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">使用渠道</view>
|
||||||
|
<view class="info-item-text">{{details.use_way}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="details.type.value === 2">
|
||||||
|
<view class="info-item-title">满减</view>
|
||||||
|
<view class="info-item-text">满{{details.price}}减{{details.full}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">券发放量</view>
|
||||||
|
<view class="info-item-text">{{details.quantity}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">已发放量</view>
|
||||||
|
<view class="info-item-text">{{details.grant_quantity}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">每人限领</view>
|
||||||
|
<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
|
||||||
|
</view>
|
||||||
|
<block v-if="details.time_type.value === 1">
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">券有效期(起)</view>
|
||||||
|
<view class="info-item-text">{{details.start_at}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">券有效期(止)</view>
|
||||||
|
<view class="info-item-text">{{details.end_at}}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-if="details.time_type.value === 2">
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">券有效期</view>
|
||||||
|
<view class="info-item-text">领取后{{details.days}}天内有效</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-item-title">创建时间</view>
|
||||||
|
<view class="info-item-text">{{details.created_at}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="mian">
|
||||||
|
<block v-if="details.goods.length > 0">
|
||||||
|
<view class="mian-title">关联商品</view>
|
||||||
|
<view class="mian-goods">
|
||||||
|
<view class="item" v-for="(item, index) in details.goods" :key="index">
|
||||||
|
<view class="item-title nowrap">{{item.name}}</view>
|
||||||
|
<view class="item-price nowrap">￥{{item.price}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="mian-title">使用说明</view>
|
||||||
|
<view class="mian-text">
|
||||||
|
<text>{{details.description || '-'}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
<!-- footer -->
|
||||||
|
<view class="footer">
|
||||||
|
<view class="footer-flex">
|
||||||
|
<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
|
||||||
|
<view class="item" @click="onCouponsRecommend">{{recommended ? '设为推荐': '已设为推荐'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { magCouponsInfo, magCouponsStatus, magCouponsRecommend } from '@/apis/interfaces/coupons'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoding : true,
|
||||||
|
recommended : false,
|
||||||
|
details : {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
magCouponsInfo(this.$Route.query.couponId).then(res => {
|
||||||
|
this.recommended = res.can.recommended
|
||||||
|
this.details = res
|
||||||
|
this.isLoding = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 上下架
|
||||||
|
putStatus(){
|
||||||
|
magCouponsStatus(this.details.coupon_id).then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
title: res,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
this.$set(this.details, 'status', this.details.status.value == 4 ? {'value': 2,'text': "上架"} : {'value': 4,'text': "下架"})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 设为推荐
|
||||||
|
onCouponsRecommend(){
|
||||||
|
magCouponsRecommend(this.details.coupon_id).then(res => {
|
||||||
|
this.recommended = !this.recommended
|
||||||
|
uni.showToast({
|
||||||
|
title: res.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// content
|
||||||
|
.content{
|
||||||
|
padding-bottom: $padding + 90;
|
||||||
|
}
|
||||||
|
// footer
|
||||||
|
.footer{
|
||||||
|
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||||
|
background: white;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: ($padding/2) $padding;
|
||||||
|
.footer-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.item{
|
||||||
|
line-height: 70rpx;
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
color: $text-price;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
font-weight: bold;
|
||||||
|
border-right: solid 1rpx $border-color;
|
||||||
|
&:last-child{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.details{
|
||||||
|
margin: $margin;
|
||||||
|
background: white;
|
||||||
|
border-radius: $radius;
|
||||||
|
// 优惠券信息
|
||||||
|
.header{
|
||||||
|
position: relative;
|
||||||
|
border-bottom: dashed 2rpx $border-color;
|
||||||
|
padding: $padding;
|
||||||
|
&::after,&::before{
|
||||||
|
position: absolute;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: #f8f8f8;
|
||||||
|
content: " ";
|
||||||
|
bottom: -16rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
left: -16rpx;
|
||||||
|
}
|
||||||
|
&::before{
|
||||||
|
right: -16rpx;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
padding: $padding 0;
|
||||||
|
text-align: center;
|
||||||
|
.info-cover{
|
||||||
|
width: 128rpx;
|
||||||
|
height: 128rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.info-title{
|
||||||
|
padding-top: $padding;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-item{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 200rpx;
|
||||||
|
min-height: 60rpx;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
padding-bottom: $padding/3;
|
||||||
|
&:last-child{
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.info-item-title{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
line-height: 50rpx;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.info-item-text{
|
||||||
|
line-height: 50rpx;
|
||||||
|
color: $text-gray;
|
||||||
|
text-align: right;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 优惠券介绍
|
||||||
|
.mian{
|
||||||
|
padding: $padding;
|
||||||
|
.mian-title{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 50rpx;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.mian-text{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
padding-top: $padding/3;
|
||||||
|
}
|
||||||
|
.mian-goods{
|
||||||
|
padding-bottom: $padding;
|
||||||
|
.item{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 60rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
padding-top: $padding/3;
|
||||||
|
.item-title{
|
||||||
|
width: 75%;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
.item-price{
|
||||||
|
width: 25%;
|
||||||
|
color: $text-price;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
265
pages/coupons/management.vue
Normal file
265
pages/coupons/management.vue
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="header">
|
||||||
|
<view class="tabs">
|
||||||
|
<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
|
||||||
|
<view class="item" :class="{'show': listType == '1'}" @click="onTabs('1')">服务券</view>
|
||||||
|
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
|
||||||
|
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
|
||||||
|
</view>
|
||||||
|
<view class="tabs-type">
|
||||||
|
<view class="item" :class="{'show': tabsType == ''}" @click="onTabsType('')">全部</view>
|
||||||
|
<view class="item" :class="{'show': tabsType == 'shown'}" @click="onTabsType('shown')">已上架</view>
|
||||||
|
<view class="item" :class="{'show': tabsType == 'unshown'}" @click="onTabsType('unshown')">已下架</view>
|
||||||
|
<view class="item" :class="{'show': tabsType == 'expire'}" @click="onTabsType('expire')">即将过期</view>
|
||||||
|
<view class="item" :class="{'show': tabsType == 'over'}" @click="onTabsType('over')">已过期</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<block v-if="coupons.length > 0">
|
||||||
|
<view class="coupons">
|
||||||
|
<view class="coupons-flex" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'magDetails', params: {couponId: item.coupon_id}})">
|
||||||
|
<view class="item cover">
|
||||||
|
<view v-if="item.type.value === 2">
|
||||||
|
<view class="cover-price">{{item.price || 0}}<text>元</text></view>
|
||||||
|
<view class="cover-subtitle">代金券</view>
|
||||||
|
</view>
|
||||||
|
<image v-else class="cover-img" :src="item.cover" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="item mian">
|
||||||
|
<view class="title nowrap">{{item.title}}</view>
|
||||||
|
<view class="time nowrap">
|
||||||
|
<block v-if="item.time_type.value == 1">{{item.start_at}}至{{item.end_at}}</block>
|
||||||
|
<block v-if="item.time_type.value == 2">领取后{{item.days}}天内有效</block>
|
||||||
|
</view>
|
||||||
|
<view class="tags nowrap">
|
||||||
|
<text>已{{item.status.text}}</text>
|
||||||
|
<text>{{item.goods_count}}商品可用</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="arrowright">
|
||||||
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="list-null">
|
||||||
|
<view class="sub-title">暂无相关优惠券</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { toolsCoupons } from '@/apis/interfaces/coupons'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listType: '',
|
||||||
|
tabsType: '',
|
||||||
|
coupons : [],
|
||||||
|
pages : {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getCoupons()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 选择类型
|
||||||
|
onTabs(value){
|
||||||
|
if(value == this.listType) return
|
||||||
|
this.listType = value
|
||||||
|
this.getCoupons()
|
||||||
|
},
|
||||||
|
// 状态筛选
|
||||||
|
onTabsType(val){
|
||||||
|
if(this.tabsType === val) return
|
||||||
|
this.tabsType = val
|
||||||
|
this.getCoupons()
|
||||||
|
},
|
||||||
|
// 数据列表
|
||||||
|
getCoupons(){
|
||||||
|
toolsCoupons({
|
||||||
|
type : this.listType,
|
||||||
|
status : this.tabsType
|
||||||
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.coupons = res.lists.data
|
||||||
|
this.pages = res.lists.page
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onNavigationBarButtonTap() {
|
||||||
|
this.$Router.push({name: 'couponsAdd'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// tabs
|
||||||
|
.header{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
.tabs{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
background: white;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-gray;
|
||||||
|
.item{
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
&.show{
|
||||||
|
color: $text-price;
|
||||||
|
border-bottom: solid 4rpx $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 类型
|
||||||
|
.tabs-type{
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
background: white;
|
||||||
|
.item{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
height: 46rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
border-radius: 23rpx;
|
||||||
|
padding: 0 ($padding - 10);
|
||||||
|
background: white;
|
||||||
|
margin-right: $margin/2;
|
||||||
|
color: $text-gray;
|
||||||
|
&.show{
|
||||||
|
background-color: rgba($color: $text-price, $alpha: .1);
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 空提示
|
||||||
|
.list-null{
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
@extend .vertical;
|
||||||
|
.sub-title{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 288rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 订单管理
|
||||||
|
.coupons{
|
||||||
|
padding-top: 180rpx;
|
||||||
|
@extend .ios-bottom;
|
||||||
|
.coupons-flex{
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
margin: $margin;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: $padding 70rpx $padding 0;
|
||||||
|
.item{
|
||||||
|
position: relative;
|
||||||
|
padding: 0 $padding;
|
||||||
|
}
|
||||||
|
.arrowright{
|
||||||
|
position: absolute;
|
||||||
|
right: $margin;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
@extend .vertical
|
||||||
|
}
|
||||||
|
.cover{
|
||||||
|
position: relative;
|
||||||
|
border-right: dashed 3rpx $border-color;
|
||||||
|
width: 148rpx;
|
||||||
|
text-align: center;
|
||||||
|
.cover-img{
|
||||||
|
width: 148rpx;
|
||||||
|
height: 148rpx;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
vertical-align: top;
|
||||||
|
background: $border-color-lg;
|
||||||
|
border:solid 1rpx $border-color;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.cover-price{
|
||||||
|
padding-top: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 58rpx;
|
||||||
|
font-size: $title-size + 10;
|
||||||
|
color: $text-price;
|
||||||
|
text{
|
||||||
|
font-size: 70%;
|
||||||
|
padding-left: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cover-subtitle{
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
}
|
||||||
|
&::after,&::before{
|
||||||
|
position: absolute;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: #f8f8f8;
|
||||||
|
content: " ";
|
||||||
|
right: -16rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
top: -($padding + 15);
|
||||||
|
}
|
||||||
|
&::before{
|
||||||
|
bottom: -($padding + 15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mian{
|
||||||
|
justify-content: center;
|
||||||
|
width: calc(100% - 148rpx - #{$padding*2});
|
||||||
|
box-sizing: border-box;
|
||||||
|
@extend .vertical;
|
||||||
|
.title{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
line-height: 50rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.time, .tags{
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
.tags{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
text{
|
||||||
|
background: $border-color-lg;
|
||||||
|
color: $text-gray;
|
||||||
|
padding: 0 ($padding/2);
|
||||||
|
margin-right: ($margin/2);
|
||||||
|
&:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
243
pages/coupons/selectGoods.vue
Normal file
243
pages/coupons/selectGoods.vue
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 商品列表 -->
|
||||||
|
<view class="lists">
|
||||||
|
<view class="goods-item" v-for="(item, index) in goods" :key="index">
|
||||||
|
<checkbox class="checkbox" :checked="item.isSelect" @click="onSelect(index)"/>
|
||||||
|
<view class="mian">
|
||||||
|
<image class="cover" :src="item.cover" mode="aspectFill" />
|
||||||
|
<view class="title">{{item.title}}</view>
|
||||||
|
<view class="subtitle">{{item.description}}</view>
|
||||||
|
<view class="mian-flex">
|
||||||
|
<view class="price"><text>￥</text>{{item.price}}</view>
|
||||||
|
<view class="inventory">权证剩余{{item.stock}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</view>
|
||||||
|
<!-- footer -->
|
||||||
|
<view class="footer">
|
||||||
|
<view class="footer-flex">
|
||||||
|
<view class="flex-checkbox">
|
||||||
|
<checkbox class="checkbox" :checked="allSelect" @click="onAllSelect"/>
|
||||||
|
<label for="all">
|
||||||
|
<view class="text">全选</view>
|
||||||
|
<view class="sub-text">已选{{selectGoods.length}}件</view>
|
||||||
|
</label>
|
||||||
|
</view>
|
||||||
|
<view class="flex-button" @click="setGoods">确定</view>
|
||||||
|
</view>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { couponsGoods, couponsAddgoods } from '@/apis/interfaces/coupons'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
goods : [],
|
||||||
|
selectGoods : [],
|
||||||
|
allSelect : false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
couponsGoods({
|
||||||
|
type: this.$Route.query.type
|
||||||
|
}).then(res => {
|
||||||
|
let coupongoodsIds = this.$store.getters.getCoupongoods,
|
||||||
|
goodsArr = res
|
||||||
|
for(let id of coupongoodsIds){
|
||||||
|
let selectIndex = goodsArr.findIndex(val => val.goods_sku_id === id)
|
||||||
|
goodsArr[selectIndex].isSelect = true
|
||||||
|
}
|
||||||
|
this.goods = goodsArr
|
||||||
|
this.selectNumber()
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 全选产品
|
||||||
|
onAllSelect(){
|
||||||
|
for(let val of this.goods){
|
||||||
|
val.isSelect = !this.allSelect
|
||||||
|
}
|
||||||
|
this.selectNumber()
|
||||||
|
},
|
||||||
|
// 选择产品
|
||||||
|
onSelect(index){
|
||||||
|
const goodsItem = this.goods[index]
|
||||||
|
goodsItem.isSelect = !goodsItem.isSelect
|
||||||
|
this.$set(this.goods, index, goodsItem)
|
||||||
|
this.selectNumber()
|
||||||
|
},
|
||||||
|
// 计算产品数量
|
||||||
|
selectNumber(){
|
||||||
|
let selectArr = [];
|
||||||
|
for(let val of this.goods){
|
||||||
|
if(val.isSelect) selectArr.push(val.goods_sku_id)
|
||||||
|
}
|
||||||
|
this.selectGoods = selectArr
|
||||||
|
if(selectArr.length == this.goods.length && this.goods.length != 0) this.allSelect = true
|
||||||
|
else this.allSelect = false
|
||||||
|
},
|
||||||
|
// 添加设置产品
|
||||||
|
setGoods(){
|
||||||
|
if(this.selectGoods.length <= 0){
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择优惠券关联商品',
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$store.commit('setCoupongoods', this.selectGoods)
|
||||||
|
this.$Router.back()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 列表
|
||||||
|
.lists{
|
||||||
|
padding-bottom: ($padding + 10) + 70;
|
||||||
|
.goods-item{
|
||||||
|
background: white;
|
||||||
|
padding: $padding $padding $padding ($padding + 70);
|
||||||
|
position: relative;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
.checkbox{
|
||||||
|
left: $padding;
|
||||||
|
}
|
||||||
|
.mian{
|
||||||
|
position: relative;
|
||||||
|
padding-left: $padding + 168;
|
||||||
|
min-height: 168rpx;
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 168rpx;
|
||||||
|
height: 168rpx;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
line-height: 40rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
.subtitle{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
.mian-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.price{
|
||||||
|
width: 50%;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-price;
|
||||||
|
font-size: $title-size;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
.inventory{
|
||||||
|
width: 50%;
|
||||||
|
text-align: right;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// footer
|
||||||
|
.footer{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
padding: ($padding - 10) $padding;
|
||||||
|
z-index: 99;
|
||||||
|
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||||
|
.footer-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.flex-checkbox{
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
padding-right: $padding;
|
||||||
|
padding-left: 70rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.text{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 40rpx;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.sub-text{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
line-height: 40rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex-button{
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
font-size: $title-size;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// checkbox
|
||||||
|
.checkbox{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -28rpx;
|
||||||
|
.uni-checkbox-input{
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
.uni-checkbox-input.uni-checkbox-input-checked{
|
||||||
|
border: none;
|
||||||
|
background: $text-price;
|
||||||
|
}
|
||||||
|
.uni-checkbox-input.uni-checkbox-input-checked::before{
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color:#fff;
|
||||||
|
background: transparent;
|
||||||
|
transform:translate(-50%, -50%) scale(1);
|
||||||
|
-webkit-transform:translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,19 +1,549 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="crystal">
|
||||||
发现更多
|
<!-- 公共提示弹出 start -->
|
||||||
|
<order-tips title="温馨提示" content="恭喜您,签到成功" :tipsState="sign.signShow" @tipseject="signject" />
|
||||||
|
<!-- 公共提示弹出 end -->
|
||||||
|
|
||||||
|
<!-- 公共提示弹出 start -->
|
||||||
|
<order-tips :title="tips.tipsTitle" :content="tips.tipsContent" :tipsState="tips.tipsState" @tipseject="tipseject" />
|
||||||
|
<!-- 公共提示弹出 end -->
|
||||||
|
|
||||||
|
<!-- 账户余额 -->
|
||||||
|
<view class="total">
|
||||||
|
<view class="item ellipsis"><image src="@/static/icons/gemstone-icon.png"/>原石 {{ account.coin }}</view>
|
||||||
|
<view class="item ellipsis"><image src="@/static/icons/crystal-icon.png"/>水晶 {{ account.crystal }}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 矿石 -->
|
||||||
|
<view class="ore">
|
||||||
|
<image src="/static/img/crystal-ore.png" mode="widthFix" />
|
||||||
|
<view class="ore-lists">
|
||||||
|
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
|
||||||
|
<block v-if="item.amount !== null">
|
||||||
|
<image src="/static/img/crystal-ore-icon.png" mode="widthFix" class="icon" />
|
||||||
|
<view class="text">水晶{{ item.amount || '-'}}</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
|
||||||
|
<image src="/static/img/gemstone-ore-icon.png" mode="widthFix" class="icon" />
|
||||||
|
<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
|
||||||
|
</navigator>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 任务分类 -->
|
||||||
|
<scroll-view class="task-block" scroll-x="true">
|
||||||
|
<!-- url="../index/index" open-type="switchTab" -->
|
||||||
|
<view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
|
||||||
|
<view class="text">{{ item.remark }}</view>
|
||||||
|
<view class="icon">
|
||||||
|
<image :src="item.cover" />
|
||||||
|
</view>
|
||||||
|
<view class="title">{{ item.title }}</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 内容 -->
|
||||||
|
<view class="content">
|
||||||
|
<!-- 签到 -->
|
||||||
|
<view class="signCont">
|
||||||
|
<view class="content-title">
|
||||||
|
<view class="content-title-text">
|
||||||
|
每日签到
|
||||||
|
<view class="tips">
|
||||||
|
累计天数越多。水晶奖励越多
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content-titl-btn" v-if="sign.signCan" @click="signClick">
|
||||||
|
立即签到
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="sign">
|
||||||
|
<view class="sign-list">
|
||||||
|
<view class="item" v-for="(item, index) in sign.signArr" :key="index">
|
||||||
|
<view class="item-icon item-done" v-if="item.sign">
|
||||||
|
<image src="../../static/img/crystal-sign.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="item-icon show" :class="{ active: index == 3 || index == 7 }" v-else><text>+{{ item.crystal }}</text></view>
|
||||||
|
<view class="item-title">{{ item.text }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="sign-text">再签到{{ sign.nextTask.day }}天额外赠送{{ sign.nextTask.diff }}个水晶奖励</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 水晶任务 -->
|
||||||
|
<view class="content-title">
|
||||||
|
<view class="content-title-text">
|
||||||
|
水晶任务
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="task">
|
||||||
|
<view class="task-item" v-for="(item, index) in task" :key="index" @click="JumpUrl(item.url, item.title)">
|
||||||
|
<image class="task-icon" :src="item.ico" mode="aspectFill"></image>
|
||||||
|
<view class="task-title">{{item.title || '-'}}</view>
|
||||||
|
<view class="task-subtitle">{{item.remark || '-'}}</view>
|
||||||
|
<view class="task-label">{{item.tips || '-'}}<image class="task-label-icon" src="../../static/img/user-crystalMark-grey.png" @click.stop="crystalShow"></image></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { crystals, thawlog, task, category, sign, operateSign } from '@/apis/interfaces/crystal'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
account: {
|
||||||
|
coin: 0,
|
||||||
|
crystal: '0.00'
|
||||||
|
},
|
||||||
|
yesterday: '0.00',
|
||||||
|
crystalArr: [],
|
||||||
|
categoryArr: [], // 分类列表
|
||||||
|
ids: [],
|
||||||
|
task: [],
|
||||||
|
sign: {
|
||||||
|
signArr : [],
|
||||||
|
nextTask: '',
|
||||||
|
signCan : false,
|
||||||
|
signShow: false
|
||||||
|
},
|
||||||
|
tips : {
|
||||||
|
tipsTitle : '', // 弹出的动态名称
|
||||||
|
tipsContent : '', // 弹出的动态内容
|
||||||
|
tipsState : false // 弹出的动态状态
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 获取水晶领取信息
|
||||||
|
crystals().then(res => {
|
||||||
|
this.account = {
|
||||||
|
coin: res.coin,
|
||||||
|
crystal: res.crystal
|
||||||
|
}
|
||||||
|
this.crystalArr = res.crystal_array
|
||||||
|
this.ids = res.all_ids
|
||||||
|
this.yesterday = res.yesterday_crystal
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 获取水晶任务
|
||||||
|
task().then(res => {
|
||||||
|
this.task = res
|
||||||
|
})
|
||||||
|
|
||||||
};
|
// 获取水晶分类
|
||||||
|
category().then(res => {
|
||||||
|
this.categoryArr = res
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取水晶签到信息
|
||||||
|
this.signInfo();
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
ledCrystal(index) {
|
||||||
|
// 领取水晶
|
||||||
|
thawlog({
|
||||||
|
thaw_id: this.crystalArr[index].log_id,
|
||||||
|
all_ids: this.ids
|
||||||
|
}).then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '+' + this.crystalArr[index].amount + '水晶',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
this.$set(this.account, 'crystal', res.crystal)
|
||||||
|
this.ids = res.all_ids
|
||||||
|
if (JSON.stringify(res.last) === '[]') {
|
||||||
|
this.$set(this.crystalArr, index, {
|
||||||
|
amount: null
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$set(this.crystalArr, index, res.last)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 商品详情
|
||||||
|
onTack(e) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '../goods/goods?id=' + e.goods_id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 提示信息
|
||||||
|
onShowToast() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '暂未开放，敬请期待',
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 水晶签到信息
|
||||||
|
signInfo() {
|
||||||
|
sign().then(res => {
|
||||||
|
this.sign.signArr = res.lists
|
||||||
|
this.sign.nextTask = res.next_task
|
||||||
|
this.sign.signCan = res.can_sign
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 签到
|
||||||
|
signClick() {
|
||||||
|
uni.vibrateShort({
|
||||||
|
success: () => {
|
||||||
|
operateSign().then(res => {
|
||||||
|
// 获取水晶签到信息
|
||||||
|
this.signInfo();
|
||||||
|
|
||||||
|
this.sign.signShow = !this.sign.signShow
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 提示语-组件返回参数
|
||||||
|
signject(val) {
|
||||||
|
console.log(val)
|
||||||
|
this.sign.signShow = val.tipsState
|
||||||
|
},
|
||||||
|
|
||||||
|
// 水晶分类跳转
|
||||||
|
JumpUrl(open, title) {
|
||||||
|
var type = open.openType;
|
||||||
|
switch(type){
|
||||||
|
case 'switchTab':
|
||||||
|
uni.switchTab({
|
||||||
|
url: open.path
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 'web':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/web-view/index?title=${title}&url=${open.url}`
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 'navigateTo':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: open.path
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 水晶原则提示语
|
||||||
|
crystalShow () {
|
||||||
|
this.tips.tipsTitle = '水晶规则'
|
||||||
|
this.tips.tipsContent = '水晶是用户获取原石的影响因子，同一时段内，水晶越高，获取的原石越多.'
|
||||||
|
this.tips.tipsState = !this.tips.tipsState
|
||||||
|
},
|
||||||
|
// 水晶原则提示语-组件返回参数
|
||||||
|
tipseject(val) {
|
||||||
|
this.tips.tipsState = val.tipsState
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
/* 水晶漂浮动画 */
|
||||||
|
.oct-float {
|
||||||
|
animation: 4s octfloat infinite;
|
||||||
|
}
|
||||||
|
@keyframes octfloat {
|
||||||
|
0% {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
<style lang="scss">
|
50% {
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 背景
|
||||||
|
.crystal{
|
||||||
|
background: $mian-color-deep;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: var(--status-bar-height);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: url(@/static/background/crystal-background.png);
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: top center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
// 底部内容
|
||||||
|
.content{
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
padding: $padding;
|
||||||
|
background: white;
|
||||||
|
border-radius: $radius $radius 0 0;
|
||||||
|
// 标题
|
||||||
|
.content-title{
|
||||||
|
padding: 0 $padding / 2;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-color;
|
||||||
|
position: relative;
|
||||||
|
.content-title-text {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
width: calc(100% - 160rpx);
|
||||||
|
margin-bottom: $margin;
|
||||||
|
.tips {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-titl-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: $margin;
|
||||||
|
background-image: linear-gradient(to left, $mian-color-deep, $mian-color);
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
line-height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
border-radius: $radius * 2;
|
||||||
|
width: 160rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 签到
|
||||||
|
.sign{
|
||||||
|
padding-top: $padding;
|
||||||
|
padding-bottom: $padding * 2;
|
||||||
|
.sign-list{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.item{
|
||||||
|
text-align: center;
|
||||||
|
.item-icon{
|
||||||
|
display: inline-block;
|
||||||
|
background-image: linear-gradient(to left, $mian-color-deep, $mian-color);
|
||||||
|
color: white;
|
||||||
|
width: 54rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border:solid 2rpx $mian-color;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&.item-done {
|
||||||
|
background-image: linear-gradient(to left, #999, #999);
|
||||||
|
border-color: #999;
|
||||||
|
}
|
||||||
|
image {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
background-image: linear-gradient(to left, #ee1d23, #ef8c85);
|
||||||
|
border-color: #fd6165;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
transform: scale(.8);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-title{
|
||||||
|
color: $text-gray;
|
||||||
|
padding-top: $padding / 2;
|
||||||
|
font-size: $title-size-sm - 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sign-text{
|
||||||
|
padding: $padding ($padding / 2) 0;
|
||||||
|
color: $mian-color-deep;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 水晶任务
|
||||||
|
.task{
|
||||||
|
padding: 0 ($padding / 2) $padding * 2;
|
||||||
|
.task-item{
|
||||||
|
position: relative;
|
||||||
|
margin: 0 ($margin / 2);
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
padding: $padding 200rpx $padding 90rpx;
|
||||||
|
&:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.task-icon{
|
||||||
|
position: absolute;
|
||||||
|
top: $padding + 8;
|
||||||
|
left: 0;
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
// background: $border-color-lg;
|
||||||
|
}
|
||||||
|
.task-title{
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-color;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
.task-subtitle{
|
||||||
|
color: $text-gray-lg;
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
.task-label{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: $padding;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
color: $text-color;
|
||||||
|
display: flex;
|
||||||
|
.task-label-icon {
|
||||||
|
width: $uni-img-size-sm - 6;
|
||||||
|
height: $uni-img-size-sm - 6;
|
||||||
|
margin: $margin + 4 0 0 $margin - 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 数据统计
|
||||||
|
.total {
|
||||||
|
position: relative;
|
||||||
|
margin: $margin ($margin + $margin/2);
|
||||||
|
background: rgba($color: $mian-color-deep, $alpha: .6);
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
border-radius: $radius;
|
||||||
|
.item {
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 $padding;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
line-height: 90rpx;
|
||||||
|
image{
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: calc((90rpx - 38rpx) / 2);
|
||||||
|
margin-right: $margin / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
content: "";
|
||||||
|
width: 2rpx;
|
||||||
|
left: 50%;
|
||||||
|
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 矿石
|
||||||
|
.ore {
|
||||||
|
position: relative;
|
||||||
|
&>image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ore-lists {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
.oct-float-item{
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
.text {
|
||||||
|
margin-top: $margin / 2;
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 58rpx;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ore-item-nav{
|
||||||
|
@extend .oct-float-item;
|
||||||
|
right: $margin * 3;
|
||||||
|
top: 12%;
|
||||||
|
}
|
||||||
|
.ore-item {
|
||||||
|
@extend .oct-float-item;
|
||||||
|
&:nth-child(1) { top: 16%; left: 13%; }
|
||||||
|
&:nth-child(2) { top: 50%; right: 10%; }
|
||||||
|
&:nth-child(3) { top: 23%; right: 20%; }
|
||||||
|
&:nth-child(4) { top: 70%; left: 33%;}
|
||||||
|
&:nth-child(5) { top: 40%; left: 20%; }
|
||||||
|
&:nth-child(6) { top: 58%; left: 10%;}
|
||||||
|
&:nth-child(7) { top: 10%; right: 43%;}
|
||||||
|
&:nth-child(8) { top: 46%; right: 29%;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 任务
|
||||||
|
.task-block {
|
||||||
|
white-space: nowrap;
|
||||||
|
.item {
|
||||||
|
background: rgba($color: $mian-color, $alpha: .2);
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: $margin;
|
||||||
|
width: 210rpx;
|
||||||
|
padding: $padding * 2 $padding;
|
||||||
|
border-radius: $radius;
|
||||||
|
box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
|
||||||
|
text-align: center;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: $margin + $margin/2;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-right: $margin + $margin/2;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin: $margin 0;
|
||||||
|
width: 98rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
line-height: 98rpx;
|
||||||
|
background: $mian-color-deep;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
image {
|
||||||
|
width: 56rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $mian-color;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
37
pages/found/task.vue
Normal file
37
pages/found/task.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<task-list :taskArr= 'taskArr' />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { task } from '@/apis/interfaces/crystal'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
taskArr: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 获取列表
|
||||||
|
this.taskInfo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 列表
|
||||||
|
taskInfo() {
|
||||||
|
// 领取水晶
|
||||||
|
thawlog().then(res => {
|
||||||
|
console.log(res)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
627
pages/goods/add.vue
Normal file
627
pages/goods/add.vue
Normal file
@@ -0,0 +1,627 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 商品图片 -->
|
||||||
|
<view class="form-block">
|
||||||
|
<view class="form-upd">
|
||||||
|
<view class="form-title">商品轮播图<text>（首图封面图，点击预览，长按删除）</text></view>
|
||||||
|
<view class="form-imgs">
|
||||||
|
<view
|
||||||
|
class="item"
|
||||||
|
v-for="(item, index) in pictures"
|
||||||
|
:key="index"
|
||||||
|
@click="openImg(index, 'pictures')"
|
||||||
|
@longpress="removeImg(index, 'pictures')"
|
||||||
|
>
|
||||||
|
<image class="item-cover" :src="item.showpath" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="item item-add" @click="updCover('pictures')">
|
||||||
|
<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 商品基本信息 -->
|
||||||
|
<view class="form-block">
|
||||||
|
<view class="form-box inputs-flex">
|
||||||
|
<label class="form-label">商品标题</label>
|
||||||
|
<input type="text" v-model="name" placeholder="输入商品标题"/>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex">
|
||||||
|
<label class="form-label">商品描述</label>
|
||||||
|
<input type="text" v-model="description" placeholder="输入商品描述"/>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex">
|
||||||
|
<label class="form-label">规格单位</label>
|
||||||
|
<input type="text" v-model="skus_unit" placeholder="输入规格单位 如:件"/>
|
||||||
|
</view>
|
||||||
|
<view class="form-upd">
|
||||||
|
<view class="form-title">商品详情（点击预览，长按删除）</view>
|
||||||
|
<view class="form-imgs">
|
||||||
|
<view
|
||||||
|
class="item"
|
||||||
|
v-for="(item, index) in content"
|
||||||
|
:key="index"
|
||||||
|
@click="openImg(index, 'content')"
|
||||||
|
@longpress="removeImg(index, 'content')"
|
||||||
|
>
|
||||||
|
<image class="item-cover" :src="item.showpath" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="item item-add" @click="updCover('content')">
|
||||||
|
<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 商品价格 -->
|
||||||
|
<view class="form-block">
|
||||||
|
<view class="form-box inputs-flex input-unit">
|
||||||
|
<label class="form-label">市场价格</label>
|
||||||
|
<input type="digit" v-model="skus_cost" placeholder="0.00"/>
|
||||||
|
<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex input-unit">
|
||||||
|
<label class="form-label">销售价格</label>
|
||||||
|
<input type="digit" v-model="skus_price" placeholder="0.00"/>
|
||||||
|
<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex input-unit">
|
||||||
|
<label class="form-label">分销佣金</label>
|
||||||
|
<input type="digit" v-model="skus_charge" placeholder="0.00"/>
|
||||||
|
<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 商品详情介绍 -->
|
||||||
|
<view class="form-block">
|
||||||
|
<view class="form-box picker-flex">
|
||||||
|
<label class="form-label">支持易货</label>
|
||||||
|
<view class="picker-switch">
|
||||||
|
<switch :checked="isChange" color="#e93340" @change="pickerChange($event, 'isChange')"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex" v-if="isChange">
|
||||||
|
<label class="form-label">最低易货量</label>
|
||||||
|
<input type="number" v-model="skus_number" placeholder="输入最低易货量"/>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex">
|
||||||
|
<label class="form-label">发行权证数</label>
|
||||||
|
<input type="number" v-model="skus_stock" placeholder="输入商品发行权证数"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 售后服务 -->
|
||||||
|
<view class="form-block">
|
||||||
|
<view class="form-box picker-flex">
|
||||||
|
<label class="form-label">配送方式</label>
|
||||||
|
<picker :range="logisticArr" range-key="text" :value="logisticType" @change="pickerChange($event, 'logisticType')">
|
||||||
|
<view class="picker-text">
|
||||||
|
{{logisticArr[logisticType].text}}
|
||||||
|
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="form-box picker-flex" v-if="logisticType === 1">
|
||||||
|
<label class="form-label">关联店铺</label>
|
||||||
|
<view class="picker-text" @click="opnePopup('storePopup')">
|
||||||
|
已关联{{stores.length}}家店铺<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="form-box picker-flex">
|
||||||
|
<label class="form-label">允许售后</label>
|
||||||
|
<view class="picker-switch">
|
||||||
|
<switch :checked="isPostSale" color="#e93340" @change="pickerChange($event, 'isPostSale')"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="form-box picker-flex">
|
||||||
|
<label class="form-label">可选服务</label>
|
||||||
|
<view class="picker-text" @click="opnePopup('categoryPopup')">
|
||||||
|
已选{{services.length}}项服务<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 售后服务 -->
|
||||||
|
<view class="form-block" v-if="type == 2">
|
||||||
|
<view class="form-box picker-flex">
|
||||||
|
<label class="form-label">到期时间</label>
|
||||||
|
<picker mode="date" :value="expiriedAt" @change="pickerChange($event, 'expiriedAt')">
|
||||||
|
<view class="picker-text">
|
||||||
|
{{expiriedAt || '选择服务到期时间'}}
|
||||||
|
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 可选服务 -->
|
||||||
|
<uni-popup ref="categoryPopup">
|
||||||
|
<view class="category-popup">
|
||||||
|
<view class="header">
|
||||||
|
<view class="title">选择商品服务</view>
|
||||||
|
</view>
|
||||||
|
<view class="category-flex">
|
||||||
|
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in servicesArr" :key="index" @click="item.check = !item.check">
|
||||||
|
<view class="category-name">{{item.name}}</view>
|
||||||
|
<view class="category-content">{{item.content}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btns">
|
||||||
|
<button type="default" size="default" @click="affirmCategory('services', 'categoryPopup')">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
<!-- 选择店铺 -->
|
||||||
|
<uni-popup ref="storePopup">
|
||||||
|
<view class="category-popup">
|
||||||
|
<view class="header">
|
||||||
|
<view class="title">选择店铺</view>
|
||||||
|
</view>
|
||||||
|
<view class="category-flex">
|
||||||
|
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in storesArr" :key="index" @click="item.check = !item.check">
|
||||||
|
<view class="category-name">{{item.name}}</view>
|
||||||
|
<view class="category-content">{{item.address}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btns">
|
||||||
|
<button type="default" size="default" @click="affirmCategory('stores', 'storePopup')">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
<!-- 安全区 -->
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
<!-- footer -->
|
||||||
|
<view class="footer">
|
||||||
|
<button class="footer-btn" type="default" @click="submitAdd">{{type == 2 ? '发布': '发布并认证'}}</button>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { managesGoodsCreate, managesCreate, managesGoodsEdit, managesGoodsPut } from '@/apis/interfaces/goods'
|
||||||
|
import { uploads } from '@/apis/interfaces/uploading'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categoryId : '', // 一级分类
|
||||||
|
categoryCid : '', // 二级分类
|
||||||
|
name : '', // 标题
|
||||||
|
pictures : [], // 轮播图
|
||||||
|
content : [], // 详情图
|
||||||
|
description : '', // 商品描述
|
||||||
|
isPostSale : false, // 是否允许售后
|
||||||
|
services : [], // 商品服务
|
||||||
|
skus_cost : '', // 市场价格
|
||||||
|
skus_price : '', // 销售价格
|
||||||
|
skus_number : 1, // 易货起购数量
|
||||||
|
skus_unit : '件', // 规格文字
|
||||||
|
skus_charge : '', // 分销佣金
|
||||||
|
skus_stock : '', // 库存
|
||||||
|
isChange : false, // 是否支持易货
|
||||||
|
stores : [], // 关联店铺
|
||||||
|
expiriedAt : '', // 活动到期时间
|
||||||
|
logisticType: 0, // 配送方式
|
||||||
|
logisticArr : [
|
||||||
|
{text: '快递', type: 1},
|
||||||
|
{text: '自提', type: 2}
|
||||||
|
],
|
||||||
|
// 配置信息
|
||||||
|
storesArr : [], // 可选店铺
|
||||||
|
tags : [], // 可选商品标签
|
||||||
|
tagsIndex : 0, // 选择标签的下标
|
||||||
|
servicesArr : [], // 可选服务
|
||||||
|
type : 1, // 1为商品，2为服务
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 编辑状态信息
|
||||||
|
if(this.$Route.query.type && this.$Route.query.type === 'edit'){
|
||||||
|
managesGoodsEdit(this.$Route.query.id).then(res => {
|
||||||
|
let services = [], stores = []
|
||||||
|
let servicesArr = res.services.map(val => {
|
||||||
|
let check = (res.data.services.findIndex(obj => obj.service_id === val.service_id)) >= 0
|
||||||
|
if(check){
|
||||||
|
services.push(val.service_id)
|
||||||
|
}
|
||||||
|
return{
|
||||||
|
check,
|
||||||
|
...val
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let storesArr = res.stores.map(val => {
|
||||||
|
let check = (res.data.stores.findIndex(obj => obj.store_id === val.store_id)) >= 0
|
||||||
|
if(check){
|
||||||
|
stores.push(val.store_id)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
check,
|
||||||
|
...val
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.categoryId = res.data.category.category_id
|
||||||
|
this.categoryCid = res.data.category_sub.category_id
|
||||||
|
this.name = res.data.name
|
||||||
|
this.content = res.data.content
|
||||||
|
this.description = res.data.description
|
||||||
|
this.pictures = res.data.pictures
|
||||||
|
this.skus_cost = res.data.skus[0].cost
|
||||||
|
this.skus_price = res.data.skus[0].price
|
||||||
|
this.skus_number = res.data.skus[0].number
|
||||||
|
this.skus_unit = res.data.skus[0].unit
|
||||||
|
this.skus_charge = res.data.skus[0].charge
|
||||||
|
this.skus_stock = res.data.skus[0].stock
|
||||||
|
this.isPostSale = res.data.is_post_sale == 0
|
||||||
|
this.isChange = res.data.is_change == 0
|
||||||
|
this.logisticType= this.logisticArr.findIndex(val => val.type === res.data.logistic_type)
|
||||||
|
this.servicesArr = servicesArr
|
||||||
|
this.storesArr = storesArr
|
||||||
|
this.services = services
|
||||||
|
this.stores = stores
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 添加配置信息
|
||||||
|
managesCreate({
|
||||||
|
category_cid: this.$Route.query.cid
|
||||||
|
}).then(res => {
|
||||||
|
res.services = res.services.map(val => {
|
||||||
|
return {
|
||||||
|
check: false,
|
||||||
|
...val
|
||||||
|
}
|
||||||
|
})
|
||||||
|
res.stores = res.stores.map(val => {
|
||||||
|
return {
|
||||||
|
check: false,
|
||||||
|
...val
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.storesArr = res.stores
|
||||||
|
this.tags = res.tags
|
||||||
|
this.servicesArr= res.services
|
||||||
|
this.type = res.type
|
||||||
|
this.categoryId = this.$Route.query.id
|
||||||
|
this.categoryCid= this.$Route.query.cid
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择商品服务
|
||||||
|
opnePopup(key){
|
||||||
|
this.$refs[key].open('bottom')
|
||||||
|
},
|
||||||
|
// 确认选择商品服务
|
||||||
|
affirmCategory(key, popupKey){
|
||||||
|
let keyArr = key == 'services' ? 'servicesArr' : 'storesArr'
|
||||||
|
this[key] = []
|
||||||
|
for(let val of this[keyArr]){
|
||||||
|
if(val.check){
|
||||||
|
this[key].push(val.service_id || val.store_id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$refs[popupKey].close()
|
||||||
|
},
|
||||||
|
// picker选择
|
||||||
|
pickerChange(e, key){
|
||||||
|
this[key] = e.detail.value
|
||||||
|
},
|
||||||
|
// 图片预览
|
||||||
|
openImg(index, key){
|
||||||
|
let paths = this[key].map(val => {
|
||||||
|
return val.showpath
|
||||||
|
})
|
||||||
|
uni.previewImage({
|
||||||
|
urls : paths,
|
||||||
|
current : index,
|
||||||
|
indicator: 'number'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
removeImg(index, key){
|
||||||
|
this[key].splice(index, 1)
|
||||||
|
},
|
||||||
|
// 上传图片
|
||||||
|
updCover(key){
|
||||||
|
uni.chooseImage({
|
||||||
|
success : res => {
|
||||||
|
let path = res.tempFiles.map((val, index) => {
|
||||||
|
return {
|
||||||
|
name: 'uploads' + index,
|
||||||
|
uri : val.path
|
||||||
|
}
|
||||||
|
})
|
||||||
|
uploads(path).then(updRes => {
|
||||||
|
for(let i in updRes.path){
|
||||||
|
this[key].push({
|
||||||
|
path : updRes.path[i],
|
||||||
|
showpath: updRes.url[i]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 发布产品
|
||||||
|
submitAdd(){
|
||||||
|
let pictures = this.pictures.map(val => {return val.path}),
|
||||||
|
content = this.content.map(val => {return val.path})
|
||||||
|
|
||||||
|
let submitData = {
|
||||||
|
name : this.name,
|
||||||
|
cover : this.pictures[0].path,
|
||||||
|
category_id : this.categoryId,
|
||||||
|
category_cid : this.categoryCid,
|
||||||
|
pictures : pictures,
|
||||||
|
content : content,
|
||||||
|
description : this.description,
|
||||||
|
is_post_sale : this.isPostSale ? 0 : 1,
|
||||||
|
services : this.services,
|
||||||
|
skus_cost : this.skus_cost,
|
||||||
|
skus_price : this.skus_price,
|
||||||
|
skus_number : this.skus_number,
|
||||||
|
skus_unit : this.skus_unit,
|
||||||
|
skus_charge : this.skus_charge,
|
||||||
|
skus_stock : this.skus_stock,
|
||||||
|
is_change : this.isChange ? 0 : 1,
|
||||||
|
logistic_type: this.logisticArr[this.logisticType].type,
|
||||||
|
stores : this.stores,
|
||||||
|
expiried_at : this.expiriedAt
|
||||||
|
}
|
||||||
|
|
||||||
|
let submitFund = this.$Route.query.type === 'edit' ? managesGoodsPut(this.$Route.query.id, submitData) : managesGoodsCreate(submitData)
|
||||||
|
submitFund.then(res => {
|
||||||
|
if(this.type === 2){
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : '商品权证已发布，请耐心等待平台审核',
|
||||||
|
showCancel : false,
|
||||||
|
success : res => {
|
||||||
|
if(res.confirm){
|
||||||
|
this.$Router.back(this.$Route.query.type === 'edit' ? 1 : 2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : this.$Route.query.type === 'edit' ? '商品权证已更新，是否立即补充产品附加信息认证？' : '商品权证已发布，是否立即补充产品附加信息认证？',
|
||||||
|
cancelText : '稍后认证',
|
||||||
|
confirmText : '立即认证',
|
||||||
|
success : res => {
|
||||||
|
if(res.cancel){
|
||||||
|
this.$Router.back(this.$Route.query.type === 'edit' ? 1 : 2)
|
||||||
|
}
|
||||||
|
if(res.confirm){
|
||||||
|
let goodsId = this.$Route.query.type === 'edit' ? this.$Route.query.id : res
|
||||||
|
this.$Router.push({name: 'goodsAuth', params: { id: goodsId , type: 'goodsAdd', edit: this.$Route.query.type === 'edit'}})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
padding-bottom: 150rpx;
|
||||||
|
}
|
||||||
|
// 表单
|
||||||
|
.form-block{
|
||||||
|
background: white;
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
.form-box{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 240rpx;
|
||||||
|
padding-right: $padding;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
min-height: 80rpx;
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: $margin;
|
||||||
|
right: 0;
|
||||||
|
height: 1rpx;
|
||||||
|
content: " ";
|
||||||
|
background: $border-color;
|
||||||
|
}
|
||||||
|
&:last-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-label{
|
||||||
|
position: absolute;
|
||||||
|
left: $margin;
|
||||||
|
line-height: 80rpx;
|
||||||
|
top: 0;
|
||||||
|
width: calc(240rpx - #{$margin});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inputs-flex{
|
||||||
|
input{
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-unit{
|
||||||
|
padding-right: 200rpx;
|
||||||
|
.units{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
line-height: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
width: 200rpx;
|
||||||
|
padding-right: $padding;
|
||||||
|
text-align: right;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picker-flex{
|
||||||
|
.picker-text{
|
||||||
|
position: relative;
|
||||||
|
line-height: 80rpx;
|
||||||
|
min-height: 80rpx;
|
||||||
|
padding-right: 80rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
.picker-icon{
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picker-switch{
|
||||||
|
line-height: 80rpx;
|
||||||
|
min-height: 80rpx;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: -15rpx;
|
||||||
|
switch{
|
||||||
|
transform:scale(0.7)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-upd{
|
||||||
|
.form-title{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
line-height: 80rpx;
|
||||||
|
padding: 0 $padding;
|
||||||
|
text{
|
||||||
|
font-size: 80%;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-imgs{
|
||||||
|
margin-top: -($margin/3);
|
||||||
|
padding: 0 20rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.item{
|
||||||
|
width: calc(20% - 14rpx);
|
||||||
|
padding-top: calc(20% - 14rpx);
|
||||||
|
margin: 7rpx;
|
||||||
|
position: relative;
|
||||||
|
.item-cover{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-add{
|
||||||
|
border: dashed 2rpx $border-color;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.item-cover{
|
||||||
|
top: calc(15% - 2rpx);
|
||||||
|
left: calc(15% - 2rpx);
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 发布
|
||||||
|
.footer{
|
||||||
|
background: white;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 20rpx $padding;
|
||||||
|
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||||
|
z-index: 9;
|
||||||
|
.footer-btn{
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: $text-price;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 可选服务
|
||||||
|
.category-popup{
|
||||||
|
background: #F5F5F5;
|
||||||
|
padding: 0 $padding * 2 $padding * 2 $padding * 2;
|
||||||
|
.header{
|
||||||
|
padding: $padding*2 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@extend .vertical;
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size + 14;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
.subtitle{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.category-flex{
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.category-flex-item{
|
||||||
|
margin-bottom: $margin;
|
||||||
|
padding: $padding;
|
||||||
|
background: white;
|
||||||
|
border:solid 1rpx white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.category-name{
|
||||||
|
padding-bottom: $padding/2;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
.category-content{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
@extend .ellipsis;
|
||||||
|
}
|
||||||
|
&.show{
|
||||||
|
color: $text-price;
|
||||||
|
border:solid 1rpx $text-price;
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
padding-top: $padding * 2;
|
||||||
|
button{
|
||||||
|
background: $text-price;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
101
pages/goods/addClassify.vue
Normal file
101
pages/goods/addClassify.vue
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content-flex" v-if="!loding">
|
||||||
|
<scroll-view class="stair" scroll-y>
|
||||||
|
<view class="stair-item" :class="{'show': stairIndex == index}" v-for="(item, index) in category" :key="index" @click="stairIndex = index">{{item.name}}</view>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</scroll-view>
|
||||||
|
<scroll-view class="second" scroll-y>
|
||||||
|
<view class="second-item" v-for="(item, index) in category[stairIndex].children" :key="index" @click="onCategory(item.category_id)">
|
||||||
|
{{item.name}}<uni-icons class="arrow-icon" type="arrowright" color="#999" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { managesCategory } from '@/apis/interfaces/goods'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loding : true,
|
||||||
|
category : [],
|
||||||
|
stairIndex : 0,
|
||||||
|
secondIndex : 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
managesCategory().then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.loding = false
|
||||||
|
this.category = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 选择分类
|
||||||
|
onCategory(cid){
|
||||||
|
this.$Router.push({name: 'GoodsMagAdd', params: {cid, id: this.category[this.stairIndex].category_id}})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content-flex{
|
||||||
|
background-color: white;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
.stair{
|
||||||
|
background: #F5F5F5;
|
||||||
|
width: 240rpx;
|
||||||
|
.stair-item{
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 $padding;
|
||||||
|
line-height: 90rpx;
|
||||||
|
color: $text-gray;
|
||||||
|
@extend .nowrap;
|
||||||
|
&.show{
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
color: $text-price;
|
||||||
|
font-weight: bold;
|
||||||
|
&::before{
|
||||||
|
position: absolute;
|
||||||
|
height: 40rpx;
|
||||||
|
width: 5rpx;
|
||||||
|
background: $text-price;
|
||||||
|
content: " ";
|
||||||
|
left: 0;
|
||||||
|
top: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.second{
|
||||||
|
width: calc(100% - 240rpx);
|
||||||
|
.second-item{
|
||||||
|
position: relative;
|
||||||
|
padding: 0 ($padding + 80) 0 $padding;
|
||||||
|
line-height: 90rpx;
|
||||||
|
color: $text-gray;
|
||||||
|
.arrow-icon{
|
||||||
|
position: absolute;
|
||||||
|
right: $padding;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
height: 1rpx;
|
||||||
|
content: ' ';
|
||||||
|
background: $border-color;
|
||||||
|
left: $padding;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
&:first-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
185
pages/goods/attestation.vue
Normal file
185
pages/goods/attestation.vue
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<view class="GoodsAuthentication">
|
||||||
|
<view class="authenticationTop">区块链溯源码：{{info.token}}</view>
|
||||||
|
<!-- 商品认证 商品和服务 -->
|
||||||
|
<view class="authenticationItem">
|
||||||
|
<view class="authenticationItemTitle">商品认证</view>
|
||||||
|
<view class="authenticationItemcontent" v-if="info.goods">
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">{{info.goods.type ===1?'商品名称':'项目名称'}}: </view>
|
||||||
|
<view class="content">{{info.goods.name || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
|
||||||
|
<view class="title">生产批次：</view>
|
||||||
|
<view class="content">{{info.goods.batch || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" v-if="info.goods.type ===2" >
|
||||||
|
<view class="title">项目分类：</view>
|
||||||
|
<view class="content">{{info.goods.category || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
|
||||||
|
<view class="title">规格：</view>
|
||||||
|
<view class="content">{{info.goods.skus[0].unit || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">数量：</view>
|
||||||
|
<view class="content">{{info.goods.skus[0].stock || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">售价：</view>
|
||||||
|
<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
|
||||||
|
<view class="title">生产日期：</view>
|
||||||
|
<view class="content">{{info.goods.producted_at || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" >
|
||||||
|
<view class="title">{{info.goods.type ===1?'保质期':'有效期'}}：</view>
|
||||||
|
<view class="content">{{info.goods.expiried_at || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
|
||||||
|
<view class="title">生产厂家：</view>
|
||||||
|
<view class="content">{{info.goods.product_name || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
|
||||||
|
<view class="title">生产地：</view>
|
||||||
|
<view class="content">{{info.goods.product_address || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" >
|
||||||
|
<view class="title">供应商：</view>
|
||||||
|
<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" >
|
||||||
|
<view class="title">经营许可证：</view>
|
||||||
|
<view class="content">{{info.goods.lisence || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem" >
|
||||||
|
<view class="title">实物照片：</view>
|
||||||
|
<image class="img" v-if="info.goods.cover" :src="info.goods.cover" @click="priveImg(info.goods.cover)" mode="aspectFill" />
|
||||||
|
<view class="content" v-else>暂无数据</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 企业认证 （商品和服务通用） -->
|
||||||
|
<view class="authenticationItem">
|
||||||
|
<view class="authenticationItemTitle">企业认证</view>
|
||||||
|
<view class="authenticationItemcontent" v-if="info.certification">
|
||||||
|
<view class="authenticationItemcontentItem" >
|
||||||
|
<view class="title">企业名称：</view>
|
||||||
|
<view class="content">{{info.certification.name || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">企业地址：</view>
|
||||||
|
<view class="content">{{info.certification.address || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">统一信用代码：</view>
|
||||||
|
<view class="content">{{info.certification.certification.code || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">行业：</view>
|
||||||
|
<view class="content">{{info.certification.industry.title || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">经营范围：</view>
|
||||||
|
<view class="content">{{info.certification.range || '暂无数据'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">联系电话：</view>
|
||||||
|
<u-icon name="phone-fill" v-if='info.certification.contack' @click="call(info.certification.contact)"
|
||||||
|
color="#2979ff" label-color="#2979ff" label-size="26" :label='info.certification.contact' />
|
||||||
|
<view class="content" v-else> 暂无数据 </view>
|
||||||
|
</view>
|
||||||
|
<view class="authenticationItemcontentItem">
|
||||||
|
<view class="title">营业执照：</view>
|
||||||
|
<image class="img" v-if='info.certification.certification.license' :src="info.certification.certification.license" @click="priveImg(info.certification.certification.license)" mode="aspectFill" />
|
||||||
|
<view class="content" v-else>暂无数据</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 弹窗提示喽 -->
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { managesAttestation } from '@/apis/interfaces/goods'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
info: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
managesAttestation(this.$Route.query.id).then(res=>{
|
||||||
|
this.info = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GoodsAuthentication {
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
.authenticationTop {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20rpx 50rpx;
|
||||||
|
background-color: #c82626;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 60rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
// 商品认证
|
||||||
|
.authenticationItem{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 300rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
.authenticationItemTitle{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
.authenticationItemcontent{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 500rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border: solid rgba(200,38,0,.05) 6rpx;
|
||||||
|
box-shadow:2rpx 2rpx 20rpx 0rpx rgba(200,38,0,.051);
|
||||||
|
padding:10rpx 20rpx;
|
||||||
|
.authenticationItemcontentItem{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
.title{
|
||||||
|
width: 180rpx;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: calc( 100% - 180rpx);
|
||||||
|
}
|
||||||
|
.img{
|
||||||
|
width: 340rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
116
pages/goods/chain.vue
Normal file
116
pages/goods/chain.vue
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<view class="GoodsChain">
|
||||||
|
<image src="https://e-chain.cnskl.com/storage/imageresource/chain-bg.png" class='chainBg' />
|
||||||
|
<view class="chain-content">
|
||||||
|
<view class="chain-center">
|
||||||
|
<image src="/static/images/service-logi.png" mode="aspectFill" class="logo" />
|
||||||
|
<view class="name">易品新境区块链溯源证书</view>
|
||||||
|
<view class="no">区块链溯源证书：{{info.token}}</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="con-item">兹证明：</view>
|
||||||
|
<view class="con-item" v-if="info.company">
|
||||||
|
{{info.company.name}}，产品符合溯源规范，认证内容如下：特授权其产品在易品新境区块链溯源商城出售！
|
||||||
|
</view>
|
||||||
|
<view class="con-item">交易哈希: {{info.hash}}</view>
|
||||||
|
<view class="con-item">区块链高度: {{info.height}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="date" v-if="info.applied_at">授权时间: {{info.applied_at}}</view>
|
||||||
|
<view class="date">有效期至: {{info.ended_at}}</view>
|
||||||
|
<view class="companyInfo">易品新境区块链有限公司</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 弹窗提示喽 -->
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { managesChain } from '@/apis/interfaces/goods'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
info: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
managesChain(this.$Route.query.id).then(res=>{
|
||||||
|
this.info = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GoodsChain {
|
||||||
|
background-color:fff;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
.chainBg{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.chain-content{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 18vh 10vw 15vh 10vw ;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
.chain-center{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.logo{
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
margin-left: -80rpx;
|
||||||
|
left: 50%;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border: solid rgba($color: #fff, $alpha: .3) 10rpx;
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.no{
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
margin-top: 60rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
.con-item{
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.date{
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
.companyInfo{
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
737
pages/goods/details.vue
Normal file
737
pages/goods/details.vue
Normal file
@@ -0,0 +1,737 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content" v-if="!loding">
|
||||||
|
<!-- 轮播主图 -->
|
||||||
|
<view class="goods-covers">
|
||||||
|
<swiper class="swiper" indicator-dots indicator-active-color="#c82626">
|
||||||
|
<block v-if="goodsObj.pictures.length > 0">
|
||||||
|
<swiper-item v-for="(item, index) in goodsObj.pictures" :key="index">
|
||||||
|
<image class="swiper-item" :src="item" mode="aspectFill"/>
|
||||||
|
</swiper-item>
|
||||||
|
</block>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<!-- 产品详情 -->
|
||||||
|
<view class="goods-content">
|
||||||
|
<view class="header">
|
||||||
|
<view class="flex-box">
|
||||||
|
<view class="price"><text>￥</text>{{goodsObj.price.show}}</view>
|
||||||
|
<view class="sales">累计易货{{goodsObj.sales}}次</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupon" v-if="couponSee.length > 0" @click="couponsOpne">
|
||||||
|
<view class="coupon-list" v-for="(item, index) in couponSee" :key="index">
|
||||||
|
<view class="coupon-label">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupon-btn">领券<image class="coupon-btn-img" src="../../static/icons/goods_row.png" mode="aspectFill"></image></view>
|
||||||
|
</view>
|
||||||
|
<view class="title"><view class="title-hot">热卖</view>{{goodsObj.name}}</view>
|
||||||
|
<!-- <view class="sub-title">{{goodsObj.description}}</view> -->
|
||||||
|
</view>
|
||||||
|
<!-- 商家信息 -->
|
||||||
|
<view class="store">
|
||||||
|
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
|
||||||
|
<view class="store-cont">
|
||||||
|
<view class="store-title">{{goodsObj.shop.name}}</view>
|
||||||
|
<view class="rate">
|
||||||
|
<uni-rate
|
||||||
|
:readonly="true"
|
||||||
|
color="#ddd"
|
||||||
|
active-color="#c82626"
|
||||||
|
:value="2.5"
|
||||||
|
:size="14"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="openbtn" @click="onOpenWechat">进店<image class="openbtn-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image></view>
|
||||||
|
</view>
|
||||||
|
<view class="tooSee">
|
||||||
|
<view class="tooSee-label" @click="$Router.push({name: 'GoodsChain', params: {id: goodsObj.goods_id}})">
|
||||||
|
区块链证书
|
||||||
|
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="tooSee-label" @click="$Router.push({name: 'GoodsAttestation', params: {id: goodsObj.goods_id}})">
|
||||||
|
商品认证
|
||||||
|
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="tooSee-label" @click="$Router.push({name: 'GoodstracedTo', params: {id: goodsObj.goods_id}})">
|
||||||
|
商品溯源
|
||||||
|
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 产品规格 -->
|
||||||
|
<view class="size">
|
||||||
|
<view class="size-item nowrap">
|
||||||
|
<label class="title">规格</label>
|
||||||
|
{{goodsObj.skus[0].goods_name}}
|
||||||
|
</view>
|
||||||
|
<view class="size-item nowrap">
|
||||||
|
<label class="title">说明</label>
|
||||||
|
特价商品不可与优惠券叠加使用
|
||||||
|
</view>
|
||||||
|
<view class="size-item nowrap">
|
||||||
|
<label class="title">服务</label>
|
||||||
|
<view class="goods-serve" @click="serveOpne">
|
||||||
|
<image class="goods-serve-img" src="../../static/icons/goods_buy.png" mode="aspectFill"></image>
|
||||||
|
<view class="nowrap goods-serve-name"><text v-for="(item, index) in goodsObj.services">{{item.name}}</text></view>
|
||||||
|
<image class="goods-serve-img" src="../../static/icons/goods_spot.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 产品详情 -->
|
||||||
|
<view class="product">
|
||||||
|
<block v-for="(item, index) in goodsObj.content" :key="index">
|
||||||
|
<image :src="item" mode="widthFix"></image>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- footer -->
|
||||||
|
<view class="footer">
|
||||||
|
<button class="btn" size="default" @click="buyGoods">立即购买</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 优惠券弹出 -->
|
||||||
|
<uni-popup ref="couponsPopup">
|
||||||
|
<view class="coupons-popup">
|
||||||
|
<view class="coupons-header">
|
||||||
|
<view class="title">优惠券</view>
|
||||||
|
<image @click="couponsClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
<view class="coupons-cont">
|
||||||
|
<view class="coupons-name">
|
||||||
|
可领取的优惠券
|
||||||
|
</view>
|
||||||
|
<view class="coupons-list" v-for="(item , index) in coupons" :key="index">
|
||||||
|
<view class="coupons-tips" v-if="item.type">
|
||||||
|
<!-- value == 1服务券 value == 2代金券 value == 3提货券 -->
|
||||||
|
<text class="coupons-tips-text" v-if="item.type.value == '1'">服务券</text>
|
||||||
|
<text class="coupons-tips-text" v-else-if="item.type.value == '2'">代金券</text>
|
||||||
|
<text class="coupons-tips-text" v-else>提货券</text>
|
||||||
|
</view>
|
||||||
|
<view class="coupons-left" v-if="item.type.value == '2'">
|
||||||
|
<view class="coupons-number">
|
||||||
|
<text>￥</text>{{item.price}}
|
||||||
|
</view>
|
||||||
|
<view class="coupons-full">
|
||||||
|
满{{item.full}}可用
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupons-left" v-else-if="item.type.value == '3'">
|
||||||
|
<view class="coupons-number coupons-small">
|
||||||
|
提货券
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupons-center">
|
||||||
|
<view class="nowrap coupons-title">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
<view class="coupons-time" v-if="item.time">
|
||||||
|
{{item.time.interval}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="item.can.get" class="coupons-right" @click="drawCoupons(item.coupon_id, index)">
|
||||||
|
领取
|
||||||
|
</view>
|
||||||
|
<view v-else class="coupons-right coupons-right-active">
|
||||||
|
已领取
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupons-true" @click="couponsClose">
|
||||||
|
确定
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
|
||||||
|
<!-- 服务保障弹出 -->
|
||||||
|
<uni-popup ref="servePopup">
|
||||||
|
<view class="coupons-popup">
|
||||||
|
<view class="coupons-header">
|
||||||
|
<view class="title">保障</view>
|
||||||
|
<image @click="serveClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
<view class="serve-cont">
|
||||||
|
<view class="serve-label" v-for="(item, index) in goodsObj.services" :key="index">
|
||||||
|
<view class="serve-label-name">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
<view class="serve-label-text">
|
||||||
|
{{item.content}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupons-true" @click="serveClose">
|
||||||
|
确定
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { goods, managesCoupons } from '@/apis/interfaces/goods'
|
||||||
|
import userAuth from '@/public/userAuth'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loding : true,
|
||||||
|
goodsObj : {},
|
||||||
|
identity : '',
|
||||||
|
company : {},
|
||||||
|
coupons : {},
|
||||||
|
couponSee : ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
goods(this.$Route.query.id).then(res=>{
|
||||||
|
this.loding = false
|
||||||
|
this.goodsObj = res
|
||||||
|
this.identity = res.identity.id || ''
|
||||||
|
this.company = res.company
|
||||||
|
this.couponSee= res.coupons.slice(0, 3)
|
||||||
|
this.coupons = res.coupons
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 提交购买单
|
||||||
|
buyGoods(){
|
||||||
|
let token = this.$store.getters.getToken
|
||||||
|
if(token == ''){
|
||||||
|
let userLogin = new userAuth()
|
||||||
|
userLogin.Login()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$Router.push({
|
||||||
|
name: 'Buy',
|
||||||
|
params: {
|
||||||
|
skuId: this.goodsObj.skus[0].sku_id,
|
||||||
|
qty : this.goodsObj.skus[0].number
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 打开微信小程序
|
||||||
|
onOpenWechat(){
|
||||||
|
plus.share.getServices(res => {
|
||||||
|
let sweixin = null;
|
||||||
|
for(let val of res){
|
||||||
|
if(val.id === 'weixin'){
|
||||||
|
sweixin = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 以此为例子 显示跳转引导页
|
||||||
|
* 'index_4'
|
||||||
|
* index 跳小程序企业首页
|
||||||
|
* 4 企业id
|
||||||
|
**/
|
||||||
|
if(sweixin != null){
|
||||||
|
sweixin.launchMiniProgram({
|
||||||
|
id : this.company.original_id,
|
||||||
|
path: 'pages/login/guide?scene=index_' + this.company.company_id
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
uni.showToast({
|
||||||
|
title: '当前环境不支持打开微信小程序',
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 领取优惠券
|
||||||
|
drawCoupons(id){
|
||||||
|
let token = this.$store.getters.getToken
|
||||||
|
if(token == ''){
|
||||||
|
let userLogin = new userAuth()
|
||||||
|
userLogin.Login()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
managesCoupons(id).then(res=>{
|
||||||
|
uni.showToast({
|
||||||
|
title: '领取成功',
|
||||||
|
type: 'primary',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon : 'none',
|
||||||
|
title: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择优惠券-显示
|
||||||
|
couponsOpne(){
|
||||||
|
this.$refs.couponsPopup.open('bottom')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择优惠券-隐藏
|
||||||
|
couponsClose(){
|
||||||
|
this.$refs.couponsPopup.close()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看保障服务-显示
|
||||||
|
serveOpne(){
|
||||||
|
this.$refs.servePopup.open('bottom')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看保障服务-隐藏
|
||||||
|
serveClose() {
|
||||||
|
this.$refs.servePopup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
position: relative;
|
||||||
|
padding-top: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
// 轮播图
|
||||||
|
.goods-covers{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 100%;
|
||||||
|
.swiper{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.swiper-item{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 商品详情
|
||||||
|
.goods-content{
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: $radius $radius 0 0;
|
||||||
|
padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
|
||||||
|
padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);
|
||||||
|
// 详情
|
||||||
|
.header{
|
||||||
|
padding: 0 $padding $padding;
|
||||||
|
.title{
|
||||||
|
font-size: $title-size;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
.title-hot {
|
||||||
|
background-color: #fee195;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
margin: 6rpx 10rpx 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
padding-bottom: $padding/3;
|
||||||
|
}
|
||||||
|
.flex-box{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 90rpx;
|
||||||
|
.price{
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-price;
|
||||||
|
font-size: $title-size + 14;
|
||||||
|
text{
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
width: calc(60% - #{$padding});
|
||||||
|
}
|
||||||
|
.sales{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
width: 40%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增优惠券
|
||||||
|
.coupon {
|
||||||
|
background-color: #fef2f2;
|
||||||
|
color: #e1293f;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 1rpx solid #ffe5e5;
|
||||||
|
padding: $padding - 15;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: $margin - 10;
|
||||||
|
.coupon-list {
|
||||||
|
font-size: 22rpx;
|
||||||
|
.coupon-label {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1rpx solid #e998a1;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 0 15rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
margin-right: $margin - 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupon-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: $padding - 20;
|
||||||
|
top: 0;
|
||||||
|
line-height: 60rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 700;
|
||||||
|
.coupon-btn-img {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin: 20rpx 0 0 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增服务
|
||||||
|
.goods-serve {
|
||||||
|
display: flex;
|
||||||
|
.goods-serve-img {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
.goods-serve-name {
|
||||||
|
margin: 0 30rpx 0 20rpx;
|
||||||
|
width: calc(100% - 122rpx);
|
||||||
|
text {
|
||||||
|
padding-right: $padding;
|
||||||
|
position: relative;
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 店铺
|
||||||
|
.store{
|
||||||
|
position: relative;
|
||||||
|
margin: 0 $margin;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
padding: $padding;
|
||||||
|
min-height: 220rpx;
|
||||||
|
.logo{
|
||||||
|
position: absolute;
|
||||||
|
left: $margin;
|
||||||
|
top: $margin;
|
||||||
|
width: 98rpx;
|
||||||
|
height: 98rpx;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
}
|
||||||
|
.store-cont {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
padding-left: 150rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 140rpx;
|
||||||
|
}
|
||||||
|
.tooSee {
|
||||||
|
position: absolute;
|
||||||
|
top: 150rpx;
|
||||||
|
left: 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding-left: $padding;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.tooSee-label {
|
||||||
|
background-color: #fd683e;
|
||||||
|
border-radius: 8rpx 4rpx 4rpx 6rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 48rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
padding: 0 $padding - 15;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: $margin * 2;
|
||||||
|
position: relative;
|
||||||
|
&::after, &::before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: -40rpx;
|
||||||
|
top: 0;
|
||||||
|
background-color: #f64c37;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4rpx 8rpx 8rpx 4rpx;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
right: -1rpx;
|
||||||
|
top: 5%;
|
||||||
|
border: 1rpx dashed #fb745a;
|
||||||
|
height: 90%;
|
||||||
|
z-index: 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
background-color: #f2d7aa;
|
||||||
|
color: #362507;
|
||||||
|
}
|
||||||
|
&:first-child::after {
|
||||||
|
background-color: #f1d599;
|
||||||
|
}
|
||||||
|
&:first-child::before {
|
||||||
|
border-color: #fae2b9;
|
||||||
|
}
|
||||||
|
.tooSee-label-img {
|
||||||
|
position: absolute;
|
||||||
|
right: -34rpx;
|
||||||
|
top: 12rpx;
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
&:first-child .tooSee-label-img {
|
||||||
|
filter: brightness(.2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.store-title{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 60rpx;
|
||||||
|
color: $text-color;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
// rate
|
||||||
|
.openbtn{
|
||||||
|
position: absolute;
|
||||||
|
right: $margin - 10;
|
||||||
|
top: $margin * 3.5;
|
||||||
|
color: #848484;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
margin-top: -30rpx;
|
||||||
|
display: flex;
|
||||||
|
.openbtn-img {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
filter: brightness(.5);
|
||||||
|
margin-top: 14rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 产品规格
|
||||||
|
.size{
|
||||||
|
margin-top: $margin;
|
||||||
|
border-top: solid 20rpx #F8F8F8;
|
||||||
|
border-bottom: solid 20rpx #F8F8F8;
|
||||||
|
.size-item{
|
||||||
|
position: relative;
|
||||||
|
padding: 0 $padding 0 ($padding + 100);
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
left: $margin;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
content: " ";
|
||||||
|
height: 1rpx;
|
||||||
|
background-color: $border-color;
|
||||||
|
}
|
||||||
|
&:last-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
position: absolute;
|
||||||
|
left: $margin;
|
||||||
|
top: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 产品详情
|
||||||
|
.product{
|
||||||
|
image{
|
||||||
|
vertical-align: top;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 立即购买
|
||||||
|
.footer{
|
||||||
|
padding: $padding;
|
||||||
|
background: white;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 99;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.btn[size='default']{
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
margin-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
margin-bottom: calc(constant(safe-area-inset-bottom) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 优惠券弹出样式
|
||||||
|
.coupons-popup {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 40rpx 40rpx 0 0;
|
||||||
|
padding: $padding;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.coupons-header {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: $margin*1.5;
|
||||||
|
.title {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupons-cont {
|
||||||
|
.coupons-name {
|
||||||
|
color: #616065;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
.coupons-list {
|
||||||
|
border: 2rpx solid #d6b9be;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
margin-top: $margin;
|
||||||
|
.coupons-tips {
|
||||||
|
background-color: #211e17;
|
||||||
|
color: #efe8d8;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0 0 20rpx 0;
|
||||||
|
padding: 0 8rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
.coupons-tips-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
transform:scale(.85);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupons-left {
|
||||||
|
background-color: #fdedee;
|
||||||
|
color: #e1293f;
|
||||||
|
width: 190rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: $padding - 10 0;
|
||||||
|
border-right: 2rpx dashed #eccdd4;
|
||||||
|
.coupons-number {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
&.coupons-small {
|
||||||
|
font-size: 32rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupons-full {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupons-center {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: $padding - 10 130rpx 0 220rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 28rpx;
|
||||||
|
.coupons-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: #514c51;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupons-right {
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 36rpx;
|
||||||
|
width: 110rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #e1293f;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border-radius: 80rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 52rpx;
|
||||||
|
&.coupons-right-active {
|
||||||
|
background-color: #adadad;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.coupons-true {
|
||||||
|
background-image: linear-gradient(to right, #e1293f, #fd275d);
|
||||||
|
color: #FFFFFF;
|
||||||
|
border-radius: 80rpx;
|
||||||
|
line-height: 84rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: $margin*5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增服务保障样式
|
||||||
|
.serve-label {
|
||||||
|
margin-top: $margin + 10;
|
||||||
|
font-size: 28rpx;
|
||||||
|
.serve-label-name {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: $margin - 10;
|
||||||
|
}
|
||||||
|
.serve-label-text {
|
||||||
|
line-height: 44rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.serve-cont {
|
||||||
|
height: 40vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
375
pages/goods/goodsAuth.vue
Normal file
375
pages/goods/goodsAuth.vue
Normal file
@@ -0,0 +1,375 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="form-block">
|
||||||
|
<view class="form-upd">
|
||||||
|
<view class="form-title">产品实物图片<text>（点击预览，长按删除）</text></view>
|
||||||
|
<view class="form-imgs">
|
||||||
|
<view
|
||||||
|
class="item"
|
||||||
|
v-if="extendCover.length > 0"
|
||||||
|
@click="openImg"
|
||||||
|
@longpress="extendCover = []"
|
||||||
|
>
|
||||||
|
<image class="item-cover" :src="extendCover[0].showpath" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="item item-add" v-else @click="updCover">
|
||||||
|
<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 商品基本信息 -->
|
||||||
|
<view class="form-block">
|
||||||
|
<view class="form-box picker-flex">
|
||||||
|
<label class="form-label">生产日期</label>
|
||||||
|
<picker mode="date" :value="productedAt" @change="pickerChange($event, 'productedAt')">
|
||||||
|
<view class="picker-text">
|
||||||
|
{{productedAt || '选择商品生产日期'}}
|
||||||
|
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="form-box picker-flex">
|
||||||
|
<label class="form-label">过期时间</label>
|
||||||
|
<picker mode="date" :value="expiriedAt" @change="pickerChange($event, 'expiriedAt')">
|
||||||
|
<view class="picker-text">
|
||||||
|
{{expiriedAt || '选择商品过期时间'}}
|
||||||
|
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex">
|
||||||
|
<label class="form-label">生产商名称</label>
|
||||||
|
<input type="text" v-model="productName" placeholder="输入商品生产商名称"/>
|
||||||
|
</view>
|
||||||
|
<view class="form-box inputs-flex">
|
||||||
|
<label class="form-label">生产许可证号</label>
|
||||||
|
<input type="text" v-model="lisence" placeholder="输入商品生产许可证号"/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-box inputs-flex">
|
||||||
|
<label class="form-label">生产商地址</label>
|
||||||
|
<input type="text" v-model="productAddress" placeholder="输入商品生产商地址"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 安全区 -->
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
<!-- footer -->
|
||||||
|
<view class="footer">
|
||||||
|
<button class="footer-btn" type="default" @click="submitAdd">提交认证审核</button>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { managesGoodsAuth, managesGoodsExtends } from '@/apis/interfaces/goods'
|
||||||
|
import { uploads } from '@/apis/interfaces/uploading'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
productedAt : '', // 生产日期
|
||||||
|
expiriedAt : '', // 过期时间
|
||||||
|
lisence : '', // 生产许可证号
|
||||||
|
productName : '', // 生产商名称
|
||||||
|
productAddress : '', // 生产商地址
|
||||||
|
extendCover : [] // 实物图片
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if(this.$Route.query.edit == 'true'){
|
||||||
|
managesGoodsExtends(this.$Route.query.id).then(res => {
|
||||||
|
this.productedAt = res.producted_at
|
||||||
|
this.expiriedAt = res.expiried_at
|
||||||
|
this.lisence = res.lisence
|
||||||
|
this.productName = res.product_name
|
||||||
|
this.productAddress = res.product_address
|
||||||
|
this.extendCover = [{...res.cover}]
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// picker选择
|
||||||
|
pickerChange(e, key){
|
||||||
|
this[key] = e.detail.value
|
||||||
|
},
|
||||||
|
// 图片预览
|
||||||
|
openImg(){
|
||||||
|
let paths = this.extendCover.map(val => {
|
||||||
|
return val.showpath
|
||||||
|
})
|
||||||
|
uni.previewImage({
|
||||||
|
urls : paths,
|
||||||
|
current : 0,
|
||||||
|
indicator: 'number'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 上传图片
|
||||||
|
updCover(){
|
||||||
|
uni.chooseImage({
|
||||||
|
count : 1,
|
||||||
|
success : res => {
|
||||||
|
uploads([{
|
||||||
|
uri : res.tempFilePaths[0]
|
||||||
|
}]).then(updRes => {
|
||||||
|
this.extendCover.push({
|
||||||
|
path : updRes.path[0],
|
||||||
|
showpath: updRes.url[0]
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 发布产品
|
||||||
|
submitAdd(){
|
||||||
|
let submitData = {
|
||||||
|
producted_at : this.productedAt,
|
||||||
|
expiried_at : this.expiriedAt,
|
||||||
|
lisence : this.lisence,
|
||||||
|
product_name : this.productName,
|
||||||
|
product_address : this.productAddress,
|
||||||
|
extend_cover : this.extendCover[0].path
|
||||||
|
}
|
||||||
|
let submitFund = managesGoodsAuth(this.$Route.query.id, submitData)
|
||||||
|
submitFund.then(res => {
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : '商品权证认证信息已提交，请耐心等待平台审核',
|
||||||
|
showCancel : false,
|
||||||
|
success : res => {
|
||||||
|
if(res.confirm){
|
||||||
|
if(this.$Route.query.type == 'goodsAdd'){
|
||||||
|
this.$Router.back(this.$Route.query.edit == 'true' ? 2 : 3)
|
||||||
|
}else{
|
||||||
|
this.$Router.back()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
padding-bottom: 150rpx;
|
||||||
|
}
|
||||||
|
// 表单
|
||||||
|
.form-block{
|
||||||
|
background: white;
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
.form-box{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 240rpx;
|
||||||
|
padding-right: $padding;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
min-height: 80rpx;
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: $margin;
|
||||||
|
right: 0;
|
||||||
|
height: 1rpx;
|
||||||
|
content: " ";
|
||||||
|
background: $border-color;
|
||||||
|
}
|
||||||
|
&:last-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-label{
|
||||||
|
position: absolute;
|
||||||
|
left: $margin;
|
||||||
|
line-height: 80rpx;
|
||||||
|
top: 0;
|
||||||
|
width: calc(240rpx - #{$margin});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inputs-flex{
|
||||||
|
input{
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-unit{
|
||||||
|
padding-right: 200rpx;
|
||||||
|
.units{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
line-height: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
width: 200rpx;
|
||||||
|
padding-right: $padding;
|
||||||
|
text-align: right;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picker-flex{
|
||||||
|
.picker-text{
|
||||||
|
position: relative;
|
||||||
|
line-height: 80rpx;
|
||||||
|
min-height: 80rpx;
|
||||||
|
padding-right: 80rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
.picker-icon{
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picker-switch{
|
||||||
|
line-height: 80rpx;
|
||||||
|
min-height: 80rpx;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: -15rpx;
|
||||||
|
switch{
|
||||||
|
transform:scale(0.7)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-upd{
|
||||||
|
.form-title{
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
line-height: 80rpx;
|
||||||
|
padding: 0 $padding;
|
||||||
|
text{
|
||||||
|
font-size: 80%;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-imgs{
|
||||||
|
margin-top: -($margin/3);
|
||||||
|
padding: 0 20rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.item{
|
||||||
|
width: calc(20% - 14rpx);
|
||||||
|
padding-top: calc(20% - 14rpx);
|
||||||
|
margin: 7rpx;
|
||||||
|
position: relative;
|
||||||
|
.item-cover{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-add{
|
||||||
|
border: dashed 2rpx $border-color;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.item-cover{
|
||||||
|
top: calc(15% - 2rpx);
|
||||||
|
left: calc(15% - 2rpx);
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 发布
|
||||||
|
.footer{
|
||||||
|
background: white;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 20rpx $padding;
|
||||||
|
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||||
|
z-index: 9;
|
||||||
|
.footer-btn{
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: $text-price;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 可选服务
|
||||||
|
.category-popup{
|
||||||
|
background: #F5F5F5;
|
||||||
|
padding: 0 $padding * 2 $padding * 2 $padding * 2;
|
||||||
|
.header{
|
||||||
|
padding: $padding*2 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@extend .vertical;
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size + 14;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
.subtitle{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.category-flex{
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.category-flex-item{
|
||||||
|
margin-bottom: $margin;
|
||||||
|
padding: $padding;
|
||||||
|
background: white;
|
||||||
|
border:solid 1rpx white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.category-name{
|
||||||
|
padding-bottom: $padding/2;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
.category-content{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
@extend .ellipsis;
|
||||||
|
}
|
||||||
|
&.show{
|
||||||
|
color: $text-price;
|
||||||
|
border:solid 1rpx $text-price;
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
padding-top: $padding * 2;
|
||||||
|
button{
|
||||||
|
background: $text-price;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
260
pages/goods/management.vue
Normal file
260
pages/goods/management.vue
Normal file
@@ -0,0 +1,260 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 分类 -->
|
||||||
|
<view class="tabs">
|
||||||
|
<view class="item" :class="{'show': status == '0'}" @click="onTabs('0')">已发布</view>
|
||||||
|
<view class="item" :class="{'show': status == '1'}" @click="onTabs('1')">待认证</view>
|
||||||
|
<view class="item" :class="{'show': status == '2'}" @click="onTabs('2')">审核中</view>
|
||||||
|
<view class="item" :class="{'show': status == '3'}" @click="onTabs('3')">已驳回</view>
|
||||||
|
</view>
|
||||||
|
<!-- 优选商品 -->
|
||||||
|
<goodsList :list="goods" priceType="CNY" :status='status' toast="暂无产品权证">
|
||||||
|
<template v-slot:statistics="goods">
|
||||||
|
<view>库存{{goods.value.stock}}</view>
|
||||||
|
</template>
|
||||||
|
<template v-slot:footer="goods">
|
||||||
|
<view class="footer-btns">
|
||||||
|
<block v-if="status == '0'">
|
||||||
|
<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsBurn')">燃烧</button>
|
||||||
|
<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsMint')">增发</button>
|
||||||
|
</block>
|
||||||
|
<block v-if="status == '1'">
|
||||||
|
<button class="button-item" size="mini" @click="goodsAuth(goods.value.goods_id)">认证</button>
|
||||||
|
<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
|
||||||
|
</block>
|
||||||
|
<block v-if="status == '2'">
|
||||||
|
<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
|
||||||
|
</block>
|
||||||
|
<block v-if="status == '3'">
|
||||||
|
<button class="button-item" size="mini" @click="goodsPut(goods.value.goods_id, goods.value.reason)">驳回原因</button>
|
||||||
|
<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</goodsList>
|
||||||
|
<!-- 燃烧 增发 弹窗 -->
|
||||||
|
<uni-popup ref="popupLay" :safe-area="true" background-color="#ffffff">
|
||||||
|
<view class="popup">
|
||||||
|
<view class="title">库存{{stockType == 'goodsMint' ? '增发': '燃烧'}}</view>
|
||||||
|
<view class="des">
|
||||||
|
剩余库存
|
||||||
|
<text>{{itemGoods.stock}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="des">
|
||||||
|
数量
|
||||||
|
<uni-number-box v-model='stock' :min="1" :max="stockType == 'goodsBurn' ? itemGoods.stock : 9999"></uni-number-box>
|
||||||
|
</view>
|
||||||
|
<view class="btn" @click="additionalOrBurning">确认</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { managesGoodsIndex, managesGoodsDelete, managesGoodsBurn, managesGoodsMint, managesGoodsCreateBefore } from '@/apis/interfaces/goods'
|
||||||
|
import goodsList from '@/components/goods-list/goods-list'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
goodsList
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
status : 0,
|
||||||
|
goods : [],
|
||||||
|
pages : {},
|
||||||
|
itemGoods : {},
|
||||||
|
stock : 1,
|
||||||
|
stockType : ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// tabs
|
||||||
|
onTabs(value){
|
||||||
|
if(value == this.status) return
|
||||||
|
this.goods = []
|
||||||
|
this.status = value
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
// 权证列表
|
||||||
|
getList(){
|
||||||
|
managesGoodsIndex({
|
||||||
|
status: this.status
|
||||||
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.goods = res.data
|
||||||
|
this.pages = res.page
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 修改产品
|
||||||
|
goodsPut(id, text){
|
||||||
|
uni.showModal({
|
||||||
|
title : '驳回原因',
|
||||||
|
content : text,
|
||||||
|
confirmText : '编辑',
|
||||||
|
cancelText : '确定',
|
||||||
|
success : res => {
|
||||||
|
if(res.confirm){
|
||||||
|
this.$Router.push({name: 'GoodsMagAdd', params: {type: 'edit', id}})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 商品认证
|
||||||
|
goodsAuth(id){
|
||||||
|
this.$Router.push({name: 'goodsAuth', params: {id, type: 'magList'}})
|
||||||
|
},
|
||||||
|
// 燃烧，增发
|
||||||
|
openLay(item, type){
|
||||||
|
this.itemGoods = item
|
||||||
|
this.stockType = type
|
||||||
|
this.stock = 1
|
||||||
|
this.$refs.popupLay.open('bottom')
|
||||||
|
},
|
||||||
|
// 提交燃烧，增发
|
||||||
|
additionalOrBurning(){
|
||||||
|
let data = {
|
||||||
|
id : this.itemGoods.goods_id,
|
||||||
|
stock: this.stock
|
||||||
|
}
|
||||||
|
switch (this.stockType){
|
||||||
|
case 'goodsBurn':
|
||||||
|
managesGoodsBurn({...data}).then(res => {
|
||||||
|
let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
|
||||||
|
this.itemGoods.stock -= data.stock
|
||||||
|
this.$refs.popupLay.close()
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 'goodsMint':
|
||||||
|
managesGoodsMint({...data}).then(res => {
|
||||||
|
let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
|
||||||
|
this.itemGoods.stock += data.stock
|
||||||
|
this.$refs.popupLay.close()
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
uni.showToast({
|
||||||
|
title: '类型错误',
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 移出删除商品
|
||||||
|
goodsRemove(id){
|
||||||
|
let index = this.goods.findIndex(val => val.goods_id == id)
|
||||||
|
managesGoodsDelete(id).then(res => {
|
||||||
|
this.goods.splice(index,1)
|
||||||
|
if(this.goods.length === 0) this.getList()
|
||||||
|
uni.showToast({
|
||||||
|
title: '商品权证已删除',
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onNavigationBarButtonTap() {
|
||||||
|
this.$Router.push({name: 'addClassify'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
padding-top: 90rpx;
|
||||||
|
}
|
||||||
|
// tabs
|
||||||
|
.tabs{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
background: white;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-gray;
|
||||||
|
.item{
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
&.show{
|
||||||
|
color: $text-price;
|
||||||
|
border-bottom: solid 4rpx $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 按钮组
|
||||||
|
.footer-btns{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: $padding/2;
|
||||||
|
margin-left: -10rpx;
|
||||||
|
margin-right: -10rpx;
|
||||||
|
.button-item[size='mini']{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
border-radius: 0;
|
||||||
|
flex: 1;
|
||||||
|
background: $border-color-lg;
|
||||||
|
color: $text-gray;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 增发燃烧弹窗
|
||||||
|
.popup {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx 30rpx 30rpx 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background-color: $text-price;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
margin: $padding * 2;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: $padding $padding * 2;
|
||||||
|
color: $text-gray;
|
||||||
|
text{
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
173
pages/index/deal.vue
Normal file
173
pages/index/deal.vue
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="deal-back"></view>
|
||||||
|
<!-- 区块信息 -->
|
||||||
|
<view class="block-shadow chian-hash">
|
||||||
|
<view class="title">区块HASH</view>
|
||||||
|
<view class="hash">{{info.hash || '-'}}</view>
|
||||||
|
<view class="button" @click="copyHash">复制</view>
|
||||||
|
<view class="chian-info">
|
||||||
|
<view class="item-flex">
|
||||||
|
<view class="label webkit-box">交易数据</view>
|
||||||
|
<view class="ellipsis">
|
||||||
|
{{ info.tx_count || '-' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-flex">
|
||||||
|
<view class="label webkit-box">区块高度</view>
|
||||||
|
<view class="ellipsis">
|
||||||
|
{{ info.height || '-' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-flex">
|
||||||
|
<view class="label webkit-box">时间</view>
|
||||||
|
<view class="ellipsis">
|
||||||
|
{{ info.block_time || '-' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-flex webkit-box">
|
||||||
|
<view class="label">上一块</view>
|
||||||
|
<view class="ellipsis">
|
||||||
|
{{ info.parent_hash || '-' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-flex webkit-box">
|
||||||
|
<view class="label">区块难度</view>
|
||||||
|
<view class="ellipsis">
|
||||||
|
{{ info.difficulty || '-' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-flex webkit-box">
|
||||||
|
<view class="label">默克尔跟</view>
|
||||||
|
<view class="ellipsis">
|
||||||
|
{{ info.tx_hash || '-' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-flex">
|
||||||
|
<view class="label">状态哈希</view>
|
||||||
|
<view class="ellipsis">
|
||||||
|
{{ info.state_hash || '-' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 交易记录 -->
|
||||||
|
<view class="deals">
|
||||||
|
<view class="title">交易记录</view>
|
||||||
|
<deal-list :list="deal" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { hash } from '@/apis/interfaces/chain'
|
||||||
|
import dealList from '@/components/chain/deal'
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
dealList
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
info: {},
|
||||||
|
deal: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(e){
|
||||||
|
// 交易详情
|
||||||
|
if(e.hash && e.hash != '') hash(e.hash).then(res=>{
|
||||||
|
this.info = res.head
|
||||||
|
this.deal = res.trades
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '错误 22 line in chain/deal'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
else uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: 'hash值不存在，系统错误'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
copyHash(){
|
||||||
|
if(this.info.hash) uni.setClipboardData({
|
||||||
|
data: this.info.hash
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.block-shadow{
|
||||||
|
box-shadow: 0 0 2rpx 2rpx rgba($color: #000000, $alpha: .02);
|
||||||
|
}
|
||||||
|
// 背景
|
||||||
|
.deal-back {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(to bottom, #009B69, #00562d);
|
||||||
|
}
|
||||||
|
// 区块详情
|
||||||
|
.chian-hash{
|
||||||
|
margin: $margin + ($margin/2);
|
||||||
|
background-color: white;
|
||||||
|
padding: ($padding * 3) ($padding * 2);
|
||||||
|
border-radius: $radius;
|
||||||
|
text-align: center;
|
||||||
|
.title{
|
||||||
|
font-size: $title-size + 8;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.hash{
|
||||||
|
padding: $padding 0 ($padding*2) 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
.button{
|
||||||
|
background-color: $red-color;
|
||||||
|
width: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.chian-info{
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
background-color: $border-color-lg;
|
||||||
|
padding: $padding;
|
||||||
|
.item-flex{
|
||||||
|
padding-left: 220rpx;
|
||||||
|
text-align: right;
|
||||||
|
position: relative;
|
||||||
|
line-height: 70rpx;
|
||||||
|
min-height: 70rpx;
|
||||||
|
.label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 区块交易信息
|
||||||
|
.deals{
|
||||||
|
padding: $padding;
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,19 +1,484 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="content">
|
||||||
发现能量
|
<!-- 水晶获得公告 -->
|
||||||
|
<view class="notice" v-if="notice.length >= 1">
|
||||||
|
<swiper class="notice-swiper" :vertical="true" autoplay circular>
|
||||||
|
<swiper-item v-for="(item, index) in notice" :key="index">
|
||||||
|
<view class="notice-item">
|
||||||
|
<image class="notice-cover" :src="item.avatar" mode="aspectFill"></image>
|
||||||
|
<view class="notice-title ellipsis">{{item.nickname}} {{item.title}} {{item.amount}}</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<!-- 账户余额 -->
|
||||||
|
<view class="info">
|
||||||
|
<view class="info-number">
|
||||||
|
<image class="number-background number-rotate" src="@/static/background/chain-back-01.png" />
|
||||||
|
<view class="info-content webkit-box">
|
||||||
|
<view class="text">{{isAuth ? '持有原石量': '恒量发行原石量'}}<uni-icons class="help-icon" @click="showHelp('occ')" type="help-filled" size="18" color="#fff" /></view>
|
||||||
|
<view class="number">{{occ}}</view>
|
||||||
|
<view class="login" @click="$Router.push({name: 'Login'})" v-if="!isAuth">立即登录</view>
|
||||||
|
<view class="login" @click="openWallet" v-else>我的钱包</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 公告信息 -->
|
||||||
|
<!-- <view class="increase">今日消费100元，预计原石单价增长0.1%</view> -->
|
||||||
|
<!-- 平台概况 -->
|
||||||
|
<view class="situation">
|
||||||
|
<view class="header">
|
||||||
|
<view class="header-item">
|
||||||
|
<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="#009b69" /></view>
|
||||||
|
<view class="number ellipsis">{{ occBalance }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-item">
|
||||||
|
<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="#009b69" /></view>
|
||||||
|
<view class="number ellipsis">{{ yesterdayCrystal }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-item">
|
||||||
|
<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="#009b69" /></view>
|
||||||
|
<view class="number ellipsis">{{ blockHeight }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-item">
|
||||||
|
<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="#009b69" /></view>
|
||||||
|
<view class="number ellipsis">{{ gain }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-item">
|
||||||
|
<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="#009b69" /></view>
|
||||||
|
<view class="number ellipsis">{{ nodeNumber }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 节点信息 -->
|
||||||
|
<view class="node-info">
|
||||||
|
<view class="node-item">
|
||||||
|
<view class="title">轻节点</view>
|
||||||
|
<view class="number ellipsis">{{occs.light || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="node-item">
|
||||||
|
<view class="title">合作节点</view>
|
||||||
|
<view class="number ellipsis">{{occs.cooperation || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="node-item">
|
||||||
|
<view class="title">主节点</view>
|
||||||
|
<view class="number ellipsis">{{occs.main || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="node-item">
|
||||||
|
<view class="title">超级节点</view>
|
||||||
|
<view class="number ellipsis">{{occs.super || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="node-item">
|
||||||
|
<view class="title">运营节点</view>
|
||||||
|
<view class="number ellipsis">{{occs.operating || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="node-item">
|
||||||
|
<view class="title">技术节点</view>
|
||||||
|
<view class="number ellipsis">{{occs.technology || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 平台盈利额，原石数量 -->
|
||||||
|
<view class="chart">
|
||||||
|
<view class="title">平台累计营业额和原石价值走势图</view>
|
||||||
|
<view class="chart-f2">
|
||||||
|
<l-f2 ref="chartChange"></l-f2>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { occ } from '@/apis/interfaces/chain'
|
||||||
|
import { certified, security } from '@/apis/interfaces/index'
|
||||||
|
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||||
|
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
lF2
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
occs: {},
|
||||||
|
blockHeight: 0,
|
||||||
|
occBalance: 0,
|
||||||
|
occ: 0,
|
||||||
|
yesterdayCrystal: 0,
|
||||||
|
gain: 0,
|
||||||
|
nodeNumber: 0,
|
||||||
|
notice: [],
|
||||||
|
isAuth: false,
|
||||||
|
helpToast: {
|
||||||
|
occ: '恒量发行原石量',
|
||||||
|
occBalance: '平台原石量',
|
||||||
|
yesterdayCrystal: '昨日瓜分水晶',
|
||||||
|
blockHeight: '区块链高度',
|
||||||
|
gain: '平台累计盈利额',
|
||||||
|
nodeNumber: '已开通节点数'
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
if(this.$store.state.token != '') this.isAuth = true
|
||||||
|
this.getOcc()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 求助信息
|
||||||
|
showHelp(type) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: this.helpToast[type],
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 原石钱包
|
||||||
|
openWallet(){
|
||||||
|
Promise.all([certified(), security()]).then(res=> {
|
||||||
|
let certified = res[0],
|
||||||
|
security = res[1]
|
||||||
|
if(!certified){
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '您还为完成个人认证，无法激活您的钱包',
|
||||||
|
confirmText: '去认证',
|
||||||
|
confirmColor: '#009B69',
|
||||||
|
cancelColor: '#666666',
|
||||||
|
cancelText: '稍后再说',
|
||||||
|
success: res=> {
|
||||||
|
if(res.confirm) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/certification/personal'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(!security) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '激活提示',
|
||||||
|
content: '您的钱包未激活，是否立即导出助记词并激活您的钱包?',
|
||||||
|
confirmText: '去激活',
|
||||||
|
confirmColor: '#009B69',
|
||||||
|
cancelColor: '#666666',
|
||||||
|
cancelText: '稍后再说',
|
||||||
|
success: res=> {
|
||||||
|
if(res.confirm) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/wallet/add'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/wallet/property'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// occ信息
|
||||||
|
getOcc(){
|
||||||
|
occ().then(res => {
|
||||||
|
this.occs = res.occs
|
||||||
|
this.yesterdayCrystal = res.yesterday_crystal
|
||||||
|
this.occ = res.occ
|
||||||
|
this.occBalance = res.occ_balance
|
||||||
|
this.blockHeight = res.block_height
|
||||||
|
this.gain = res.gain
|
||||||
|
this.nodeNumber = res.node_number
|
||||||
|
this.notice = res.notice
|
||||||
|
if(res.help_toast) this.helpToast = res.help_toast
|
||||||
|
this.showCartc(res.movements)
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 绘制图表
|
||||||
|
showCartc(data){
|
||||||
|
// 图表信息
|
||||||
|
this.$refs.chartChange.init(config => {
|
||||||
|
config.appendPadding = [10, 15, 10, 15]
|
||||||
|
|
||||||
|
const chart = new F2.Chart(config);
|
||||||
|
chart.source(data, {
|
||||||
|
date: {
|
||||||
|
range: [0, 1],
|
||||||
|
type: 'timeCat',
|
||||||
|
mask: 'MM-DD'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tickCount: 5
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.axis('time', {
|
||||||
|
line: null,
|
||||||
|
label: function label(text, index, total) {
|
||||||
|
const textCfg = {};
|
||||||
|
if (index === 0) {
|
||||||
|
textCfg.textAlign = 'left';
|
||||||
|
} else if (index === total - 1) {
|
||||||
|
textCfg.textAlign = 'right';
|
||||||
|
}
|
||||||
|
return textCfg;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.axis('tem', {
|
||||||
|
grid: function grid(text) {
|
||||||
|
if (text === '0%') {
|
||||||
|
return {
|
||||||
|
lineDash: null,
|
||||||
|
lineWidth: 1
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.tooltip({
|
||||||
|
showCrosshairs: true
|
||||||
|
});
|
||||||
|
chart.legend({
|
||||||
|
position: 'bottom',
|
||||||
|
offsetY: 0,
|
||||||
|
offsetX: 30
|
||||||
|
});
|
||||||
|
chart.area()
|
||||||
|
.position('date*value')
|
||||||
|
.color('name', [ '#009b69', '#9f8052' ])
|
||||||
|
.shape('smooth')
|
||||||
|
chart.line()
|
||||||
|
.position('date*value')
|
||||||
|
.color('name', [ '#009b69', '#9f8052' ])
|
||||||
|
.shape('smooth', name=> {
|
||||||
|
if (name === '预期收益率') {
|
||||||
|
return 'line';
|
||||||
|
}
|
||||||
|
if (name === '实际收益率') {
|
||||||
|
return 'dash';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.render();
|
||||||
|
return chart;
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style scoped>
|
||||||
|
/* 气泡漂浮 */
|
||||||
|
.number-float{
|
||||||
|
animation: 4s octfloat infinite;
|
||||||
|
}
|
||||||
|
@keyframes octfloat{
|
||||||
|
0%{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 背景旋转 */
|
||||||
|
.number-rotate{
|
||||||
|
animation: 30s octrotate infinite linear;
|
||||||
|
}
|
||||||
|
@keyframes octrotate{
|
||||||
|
from{
|
||||||
|
transform:rotate(0deg);
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
transform:rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 背景
|
||||||
|
.content{
|
||||||
|
background: $mian-color-deep;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: var(--status-bar-height);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: url(@/static/background/chain-back-00.png);
|
||||||
|
background-size: 100%;
|
||||||
|
background-position: top center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
// 求助icon
|
||||||
|
.help-icon{
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
margin-left: $margin/2;
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
// 原石账户
|
||||||
|
.info{
|
||||||
|
margin-top: calc(#{$margin * 2} + 60rpx);
|
||||||
|
padding: var(--status-bar-height) $padding * 2 $padding * 3;
|
||||||
|
text-align: center;
|
||||||
|
.info-number{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 568rpx;
|
||||||
|
height: 568rpx;
|
||||||
|
.number-background{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.info-content{
|
||||||
|
position: absolute;
|
||||||
|
top: 12%;
|
||||||
|
left: 12%;
|
||||||
|
width: 76%;
|
||||||
|
height: 76%;
|
||||||
|
background-image: url(@/static/background/chain-back-02.png);
|
||||||
|
background-size: cover;
|
||||||
|
color: white;
|
||||||
|
.text{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
||||||
|
}
|
||||||
|
.number{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size + 8;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
||||||
|
}
|
||||||
|
.login{
|
||||||
|
margin-top: $margin;
|
||||||
|
background-color: $mian-color;
|
||||||
|
display: inline-block;
|
||||||
|
padding: ( $padding / 2 ) $padding;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
border:solid 1rpx $mian-color-deep;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 预计增长
|
||||||
|
.increase{
|
||||||
|
margin: 0 ($margin + $margin / 2) ($margin * 2);
|
||||||
|
background: rgba($color: $mian-color, $alpha: .1);
|
||||||
|
text-align: center;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $mian-color;
|
||||||
|
border-radius: $radius-sm;
|
||||||
|
padding: 0 $padding;
|
||||||
|
}
|
||||||
|
// 公告信息
|
||||||
|
.notice{
|
||||||
|
position: fixed;
|
||||||
|
top: $margin * 2;
|
||||||
|
left: $margin + $margin / 2;
|
||||||
|
right: $margin + $margin / 2;
|
||||||
|
padding-top: var(--status-bar-height);
|
||||||
|
z-index: 99;
|
||||||
|
.notice-swiper{
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
|
.notice-item{
|
||||||
|
position: relative;
|
||||||
|
height: 60rpx;
|
||||||
|
padding-left: 80rpx;
|
||||||
|
padding-right: $padding * 2;
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba($color: $mian-color-deep, $alpha: .3);
|
||||||
|
border-radius: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 100%;
|
||||||
|
.notice-cover{
|
||||||
|
position: absolute;
|
||||||
|
height: 60rpx;
|
||||||
|
width: 60rpx;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background-color: $mian-color-deep;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.notice-title{
|
||||||
|
line-height: 60rpx;
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 平台概况
|
||||||
|
.situation{
|
||||||
|
margin: 0 ($margin + $margin / 2);
|
||||||
|
background-image: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .1), $mian-color-deep);
|
||||||
|
border-radius: $radius-sm;
|
||||||
|
padding: $padding;
|
||||||
|
// 平台统计
|
||||||
|
.header{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: $margin*2;
|
||||||
|
.number{
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
color: $mian-color;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
}
|
||||||
|
.header-item{
|
||||||
|
width: 50%;
|
||||||
|
padding: $padding $padding / 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&:first-child{
|
||||||
|
width: 100%;
|
||||||
|
.number{
|
||||||
|
font-size: $title-size + 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 节点信息
|
||||||
|
.node-info{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0 -$margin / 2;
|
||||||
|
.node-item{
|
||||||
|
background: rgba($color: $mian-color, $alpha: .2);
|
||||||
|
width: calc(50% - #{$margin});
|
||||||
|
margin: $margin / 2;
|
||||||
|
padding: $padding;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: $radius-sm;
|
||||||
|
}
|
||||||
|
.number{
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba($color: white, $alpha: .7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 图表
|
||||||
|
.chart{
|
||||||
|
background: rgba($color: $mian-color, $alpha: .2);
|
||||||
|
padding: $padding;
|
||||||
|
border-radius: $radius-sm;
|
||||||
|
margin-top: $margin*2;
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80rpx;
|
||||||
|
color: rgba($color: $mian-color, $alpha: 1.0);
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
.chart-f2{
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
209
pages/index/info.vue
Normal file
209
pages/index/info.vue
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 区块信息 -->
|
||||||
|
<view class="info-back"></view>
|
||||||
|
<view class="info-list">
|
||||||
|
<view class="flex" v-for="(item, index) in assetsList" :key="index">
|
||||||
|
<view class="item-name ellipsis">
|
||||||
|
<image class="icon" :src="item.icon" mode="widthFix" />
|
||||||
|
{{ item.name || '-' }}
|
||||||
|
</view>
|
||||||
|
<view class="item-label">
|
||||||
|
<view class="number ellipsis">{{ item.balance || '0.00' }}</view>
|
||||||
|
<view class="unit ellipsis">{{ item.symbol || '-' }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 区块链变化 -->
|
||||||
|
<view class="movements">
|
||||||
|
<view class="title">区块链变化</view>
|
||||||
|
<view class="chart">
|
||||||
|
<l-f2 ref="chartChange"></l-f2>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 区块记录 -->
|
||||||
|
<view class="chain-record">
|
||||||
|
<view class="title">区块记录</view>
|
||||||
|
<chain-list :list="chainList" @onChain="chainInfo"/>
|
||||||
|
</view>
|
||||||
|
<!-- 底部安全区 -->
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { chain, situation } from '@/apis/interfaces/chain'
|
||||||
|
import chainList from '@/components/chain/chain'
|
||||||
|
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||||
|
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
chainList,
|
||||||
|
lF2
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data: [{
|
||||||
|
time: '2021-08-08 00:00:00',
|
||||||
|
value: 30
|
||||||
|
}, {
|
||||||
|
time: '2021-08-09 00:10:00',
|
||||||
|
value: 36
|
||||||
|
}, {
|
||||||
|
time: '2021-08-10 00:12:00',
|
||||||
|
value: 38
|
||||||
|
}, {
|
||||||
|
time: '2021-08-11 10:32:00',
|
||||||
|
value: 40
|
||||||
|
}, {
|
||||||
|
time: '2021-08-13 12:30:00',
|
||||||
|
value: 40
|
||||||
|
}, {
|
||||||
|
time: '2021-08-14 11:02:00',
|
||||||
|
value: 41
|
||||||
|
}, {
|
||||||
|
time: '2021-08-15 10:02:00',
|
||||||
|
value: 41
|
||||||
|
}],
|
||||||
|
assetsList: [],
|
||||||
|
chainList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
Promise.all([chain(), situation()]).then(res => {
|
||||||
|
this.chainList = res[0]
|
||||||
|
this.assetsList = res[1].assets
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: 'err in chain/info.vue ' + err
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.$refs.chartChange.init(config => {
|
||||||
|
const chart = new F2.Chart(config);
|
||||||
|
chart.source(this.data, {
|
||||||
|
time: {
|
||||||
|
type: 'timeCat',
|
||||||
|
tickCount: 3,
|
||||||
|
range: [ 0, 1 ]
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tickCount: 5,
|
||||||
|
min: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.axis('time', {
|
||||||
|
label: function label(text, index, total) {
|
||||||
|
const textCfg = {};
|
||||||
|
if (index === 0) {
|
||||||
|
textCfg.textAlign = 'left';
|
||||||
|
} else if (index === total - 1) {
|
||||||
|
textCfg.textAlign = 'right';
|
||||||
|
}
|
||||||
|
return textCfg;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.tooltip({
|
||||||
|
showCrosshairs: true
|
||||||
|
});
|
||||||
|
chart.area()
|
||||||
|
.position('time*value')
|
||||||
|
.color('l(90) 0:#009b69 1:#f7f7f7')
|
||||||
|
.shape('smooth');
|
||||||
|
chart.line()
|
||||||
|
.position('time*value')
|
||||||
|
.color('l(90) 0:#009b69 1:#f7f7f7')
|
||||||
|
.shape('smooth');
|
||||||
|
chart.render();
|
||||||
|
return chart;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 区块详情
|
||||||
|
chainInfo(e){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: './deal?hash=' + e.hash
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 背景
|
||||||
|
.info-back {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(to bottom, #009B69, #00562d);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区块信息
|
||||||
|
.info-list {
|
||||||
|
padding: 0 $padding;
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
margin: $margin * 2 $margin/2;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: $radius;
|
||||||
|
padding: $padding * 2;
|
||||||
|
box-shadow: 0 0 2rpx 2rpx rgba($color: #000000, $alpha: .02);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
width: 50%;
|
||||||
|
font-size: $title-size;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
margin-right: $margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-label {
|
||||||
|
width: 50%;
|
||||||
|
padding-left: $padding;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.number {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区块链信息
|
||||||
|
.chain-record,
|
||||||
|
.movements {
|
||||||
|
padding: $padding;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: $title-size;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.movements {
|
||||||
|
.chart {
|
||||||
|
background-color: white;
|
||||||
|
margin: $margin/2;
|
||||||
|
height: 350rpx;
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
163
pages/index/kline.vue
Normal file
163
pages/index/kline.vue
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
<template>
|
||||||
|
<view class="kline">
|
||||||
|
<l-f2 ref="chart"></l-f2>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||||
|
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
lF2,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
let data = await this.getData()
|
||||||
|
// 绘制K线
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
data = data.slice(0, 150);
|
||||||
|
const BASIC_PRICE = 6.95;
|
||||||
|
data.sort(function(obj1, obj2) {
|
||||||
|
return obj1.time > obj2.time ? 1 : -1;
|
||||||
|
});
|
||||||
|
data.forEach(function(obj) {
|
||||||
|
obj.range = [obj.start, obj.end, obj.max, obj.min];
|
||||||
|
obj.trend = obj.start <= obj.end ? 0 : 1;
|
||||||
|
});
|
||||||
|
const chart = new F2.Chart(Object.assign(config));
|
||||||
|
chart.source(data, {
|
||||||
|
range: {
|
||||||
|
tickCount: 5,
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
return val.toFixed(2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
tickCount: 3
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.tooltip({
|
||||||
|
showCrosshairs: true,
|
||||||
|
showXTip: true,
|
||||||
|
showYTip: true,
|
||||||
|
crosshairsType: 'xy',
|
||||||
|
custom: true,
|
||||||
|
yTip: function yTip(val) {
|
||||||
|
return {
|
||||||
|
text: val.toFixed(2),
|
||||||
|
fill: '#333',
|
||||||
|
fontSize: 10
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
xTip: {
|
||||||
|
fill: '#333',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
xTipBackground: {
|
||||||
|
fill: '#EDF2FE'
|
||||||
|
},
|
||||||
|
yTipBackground: {
|
||||||
|
fill: '#EDF2FE'
|
||||||
|
},
|
||||||
|
crosshairsStyle: {
|
||||||
|
stroke: '#0F8DE8'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.axis('range', {
|
||||||
|
grid: {
|
||||||
|
stroke: '#ddd',
|
||||||
|
lineWidth: 1,
|
||||||
|
lineDash: null
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
fill: '#999'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.axis('time', {
|
||||||
|
label: function label(text, index, total) {
|
||||||
|
const textCfg = {
|
||||||
|
fill: '#999'
|
||||||
|
};
|
||||||
|
if (index === 0) {
|
||||||
|
textCfg.textAlign = 'left';
|
||||||
|
}
|
||||||
|
if (index === total - 1) {
|
||||||
|
textCfg.textAlign = 'right';
|
||||||
|
}
|
||||||
|
return textCfg;
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: {
|
||||||
|
lineWidth: 1,
|
||||||
|
stroke: '#ddd'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.guide().line({
|
||||||
|
start: ['min', BASIC_PRICE],
|
||||||
|
end: ['max', BASIC_PRICE],
|
||||||
|
style: {
|
||||||
|
lineDash: [8],
|
||||||
|
stroke: '#F68300'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.guide().text({
|
||||||
|
position: ['min', BASIC_PRICE],
|
||||||
|
content: BASIC_PRICE,
|
||||||
|
style: {
|
||||||
|
fill: '#808080',
|
||||||
|
textAlign: 'start',
|
||||||
|
textBaseline: 'bottom',
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
offsetX: 2
|
||||||
|
});
|
||||||
|
chart.guide().rect({
|
||||||
|
start: ['0%', '0%'],
|
||||||
|
end: ['100%', '100%'],
|
||||||
|
style: {
|
||||||
|
stroke: '#ddd',
|
||||||
|
lineWidth: 1,
|
||||||
|
fill: '#fff',
|
||||||
|
opacity: 1,
|
||||||
|
fillOpacity: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.schema()
|
||||||
|
.position('time*range')
|
||||||
|
.color('trend', function(trend) {
|
||||||
|
return ['#F4333C', '#1CA93D'][trend];
|
||||||
|
})
|
||||||
|
.shape('candle');
|
||||||
|
chart.render();
|
||||||
|
return chart;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
// plus.screen.lockOrientation('landscape-primary')
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
uni.request({
|
||||||
|
url: 'https://gw.alipayobjects.com/os/antfincdn/c4ROEPcthk/candle-sticks.json',
|
||||||
|
success: (res) => {
|
||||||
|
resolve(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
console.log('222')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.kline{
|
||||||
|
}
|
||||||
|
</style>
|
||||||
204
pages/login/login.vue
Normal file
204
pages/login/login.vue
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="title">易品新境</view>
|
||||||
|
<view class="inputs phone">
|
||||||
|
<label class="label">+86</label>
|
||||||
|
<input type="number" placeholder="输入您的手机号码" v-model="phone"/>
|
||||||
|
</view>
|
||||||
|
<view class="inputs sms">
|
||||||
|
<input type="number" placeholder="输入短信验证码" v-model="code"/>
|
||||||
|
<button
|
||||||
|
class="sms-btn"
|
||||||
|
type="default"
|
||||||
|
size="mini"
|
||||||
|
:disabled="phone == '' || getSms"
|
||||||
|
@click="getPhoneCode"
|
||||||
|
>{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
||||||
|
</view>
|
||||||
|
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
|
||||||
|
<!-- 快捷登录 -->
|
||||||
|
<view class="quick">
|
||||||
|
<view class="quick-title">快捷登录</view>
|
||||||
|
<view class="quick-box">
|
||||||
|
<image class="quick-icon" src="@/static/icons/wechat.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 用户登录注册协议 -->
|
||||||
|
<view class="agreement">未注册的手机号验证后将自动创建账号，登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议</navigator></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getSms, smsAuth } from '@/apis/interfaces/auth'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
phone : "18245180131",
|
||||||
|
code : "",
|
||||||
|
smsTime : 60,
|
||||||
|
getSms : false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 用户登录
|
||||||
|
login(){
|
||||||
|
smsAuth({
|
||||||
|
mobileNo: this.phone,
|
||||||
|
code : this.code
|
||||||
|
}).then(res => {
|
||||||
|
this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
|
||||||
|
if(!res.is_company){
|
||||||
|
this.$Router.replace({name: "Registered"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$Router.back()
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : "none"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取验证码
|
||||||
|
getPhoneCode(){
|
||||||
|
let outTime
|
||||||
|
getSms({
|
||||||
|
mobileNo: this.phone
|
||||||
|
}).then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
title: res,
|
||||||
|
icon : "none"
|
||||||
|
})
|
||||||
|
this.getSms = true
|
||||||
|
outTime = setInterval(()=>{
|
||||||
|
if(this.smsTime <= 1){
|
||||||
|
this.getSms = false
|
||||||
|
this.smsTime = 60
|
||||||
|
clearInterval('outTime')
|
||||||
|
}
|
||||||
|
this.smsTime -= 1
|
||||||
|
},1000)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : "none"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
padding: $padding * 3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: white;
|
||||||
|
.inputs{
|
||||||
|
background: $border-color-lg;
|
||||||
|
border: solid 1rpx $border-color;
|
||||||
|
position: relative;
|
||||||
|
margin-top: $margin;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
input{
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
padding: 0 $padding;
|
||||||
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
&.phone{
|
||||||
|
padding-left: 120rpx;
|
||||||
|
.label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 120rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-right: solid 1rpx $border-color;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.sms{
|
||||||
|
padding-right: 200rpx;
|
||||||
|
.sms-btn[size='mini']{
|
||||||
|
width: 200rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
border-left: solid 1rpx $border-color;
|
||||||
|
color: $text-price;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
&[disabled]{
|
||||||
|
color: rgba($color: $text-price, $alpha: .6);
|
||||||
|
background: $border-color-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size + 6;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
margin-bottom: 100rpx;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-top: $margin;
|
||||||
|
font-size: $title-size;
|
||||||
|
line-height: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
&[disabled]{
|
||||||
|
background: rgba($color: $text-price, $alpha: .6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.quick{
|
||||||
|
padding-top: $padding * 3;
|
||||||
|
text-align: center;
|
||||||
|
.quick-title{
|
||||||
|
text-align: center;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
}
|
||||||
|
.quick-box{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.quick-icon{
|
||||||
|
width: 78rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.agreement{
|
||||||
|
padding-top: $padding * 4;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
navigator{
|
||||||
|
color: $text-price;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
353
pages/market/details.vue
Normal file
353
pages/market/details.vue
Normal file
@@ -0,0 +1,353 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="!loding">
|
||||||
|
<!-- 产品信息 -->
|
||||||
|
<view class="goods">
|
||||||
|
<image class="cover" :src="info.goods.cover" mode="aspectFill"></image>
|
||||||
|
<view class="content">
|
||||||
|
<view class="title nowrap">数字权证</view>
|
||||||
|
<view class="text nowrap">锚定商品：{{info.goods.goods_name}}</view>
|
||||||
|
<view class="text nowrap">提供企业：{{info.company.name}}</view>
|
||||||
|
<view class="text nav-goods nowrap" @click="onGoods">查看锚定商品信息<uni-icons type="arrowright" size="12" color="#e93340"></uni-icons></view>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<view class="info-item">
|
||||||
|
<label>转让用户</label>
|
||||||
|
{{info.user.username}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>转让单价</label>
|
||||||
|
￥{{info.price}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>出售数量</label>
|
||||||
|
{{info.stock}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>剩余转让数量</label>
|
||||||
|
{{info.surplus}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>区块HASH</label>
|
||||||
|
{{info.hash}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>转让时间</label>
|
||||||
|
{{info.created_at}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<button class="buy-btn" type="default" @click="openLay">我要购买</button>
|
||||||
|
<!-- 购买弹窗 -->
|
||||||
|
<uni-popup ref="buyLay" :safe-area="true" background-color="#ffffff">
|
||||||
|
<view class="popup">
|
||||||
|
<view class="title">我要购买</view>
|
||||||
|
<view class="des">
|
||||||
|
剩余转让数量
|
||||||
|
<text>{{info.surplus}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="des">
|
||||||
|
数量
|
||||||
|
<uni-number-box v-model='stock' :min="1" :max="info.surplus" @change="countPrice"></uni-number-box>
|
||||||
|
</view>
|
||||||
|
<view class="des">
|
||||||
|
订单总价
|
||||||
|
<text class="price">￥{{price}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn" @click="buy">提交订单</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
<!-- 支付方式 -->
|
||||||
|
<uni-popup ref="payLay" :safe-area="true" background-color="#ffffff">
|
||||||
|
<view class="popup">
|
||||||
|
<view class="title">支付方式</view>
|
||||||
|
<radio-group class="pay-group" @change="payType">
|
||||||
|
<view class="item">
|
||||||
|
<label>
|
||||||
|
<radio class="pay-radio" value="eb" checked color="#e93340" />
|
||||||
|
<view class="pay-title">易货额支付</view>
|
||||||
|
<view class="pay-sub-title">可用{{account.eb}}，冻结{{account.frozenEb}}</view>
|
||||||
|
</label>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<label>
|
||||||
|
<radio class="pay-radio" value="wechat" color="#e93340" />
|
||||||
|
<view class="pay-title">微信支付</view>
|
||||||
|
</label>
|
||||||
|
</view>
|
||||||
|
</radio-group>
|
||||||
|
<view class="btn" @click="orderPay">立即支付</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { marketsInfo, marketsBuy, marketsPay } from '@/apis/interfaces/market'
|
||||||
|
import userAuth from '@/public/userAuth'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
payValue: 'eb',
|
||||||
|
orderNo : '',
|
||||||
|
price : '0.00',
|
||||||
|
stock : 1,
|
||||||
|
loding : true,
|
||||||
|
info : {},
|
||||||
|
account : {
|
||||||
|
eb : '0.00',
|
||||||
|
frozenEb: '0.00'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
marketsInfo(this.$Route.query.marketId).then(res =>{
|
||||||
|
this.info = res
|
||||||
|
this.price = res.price
|
||||||
|
this.loding = false
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 查看锚定产品
|
||||||
|
onGoods(){
|
||||||
|
this.$Router.push({name: 'marketGoods', params: { id: this.info.goods.goods_id }})
|
||||||
|
},
|
||||||
|
// 选择购买方式
|
||||||
|
payType(e){
|
||||||
|
this.payValue = e.detail.value
|
||||||
|
},
|
||||||
|
// 购买弹窗
|
||||||
|
openLay(){
|
||||||
|
let token = this.$store.getters.getToken
|
||||||
|
if(token == ''){
|
||||||
|
let userLogin = new userAuth()
|
||||||
|
userLogin.Login()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$refs.buyLay.open('bottom')
|
||||||
|
},
|
||||||
|
// 计算价格
|
||||||
|
countPrice(e){
|
||||||
|
this.price = (e * this.info.price).toFixed(2)
|
||||||
|
},
|
||||||
|
// 提交购买单
|
||||||
|
buy(){
|
||||||
|
marketsBuy(this.info.market_id, {
|
||||||
|
qty: this.stock
|
||||||
|
}).then(res => {
|
||||||
|
this.account = res.account
|
||||||
|
this.orderNo = res.market_order_no
|
||||||
|
this.$refs.buyLay.close()
|
||||||
|
this.$refs.payLay.open('bottom')
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 支付
|
||||||
|
orderPay(){
|
||||||
|
let data = {}
|
||||||
|
marketsPay(this.orderNo, this.payValue).then(res => {
|
||||||
|
switch (this.payValue){
|
||||||
|
case 'eb':
|
||||||
|
this.$refs.payLay.close()
|
||||||
|
this.$Router.push({
|
||||||
|
name : 'payResults',
|
||||||
|
params : {
|
||||||
|
index: 1,
|
||||||
|
price: this.price,
|
||||||
|
type : 'eb',
|
||||||
|
total: '可在我的资产下我的权证中查看购买的数字权证'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'wechat':
|
||||||
|
this.wxPay(JSON.parse(res))
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 微信支付
|
||||||
|
wxPay(payConfig){
|
||||||
|
uni.requestPayment({
|
||||||
|
provider : 'wxpay',
|
||||||
|
orderInfo : payConfig,
|
||||||
|
success : payRes => {
|
||||||
|
console.log(payRes)
|
||||||
|
},
|
||||||
|
fail : payErr => {
|
||||||
|
uni.showToast({
|
||||||
|
title: payErr.errMsg,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 支付方式
|
||||||
|
.pay-group{
|
||||||
|
margin: 0 ($margin * 2);
|
||||||
|
.item{
|
||||||
|
position: relative;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
padding: $padding 0;
|
||||||
|
&:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.pay-radio{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -25rpx;
|
||||||
|
}
|
||||||
|
.pay-sub-title{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
.pay-title{
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 50rpx;
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 我要购买按钮
|
||||||
|
.buy-btn{
|
||||||
|
margin: 0 $margin;
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
font-size: $title-size;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 产品信息
|
||||||
|
.goods{
|
||||||
|
min-height: 168rpx;
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
margin: $margin;
|
||||||
|
padding: $padding;
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
top: $padding;
|
||||||
|
width: 168rpx;
|
||||||
|
height: 168rpx;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding-left: calc(168rpx + #{$padding});
|
||||||
|
.title{
|
||||||
|
position: relative;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 52rpx;
|
||||||
|
padding-right: 60rpx;
|
||||||
|
text{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 60rpx;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
&.nav-goods{
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
margin-top: $margin;
|
||||||
|
border-top: solid 1rpx $border-color;
|
||||||
|
padding-top: $padding;
|
||||||
|
.info-item{
|
||||||
|
padding-left: 200rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
@extend .nowrap;
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 购买产品
|
||||||
|
.popup {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx 30rpx 30rpx 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background-color: $text-price;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
margin: $padding * 2;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: $padding $padding * 2;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
text{
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
116
pages/market/goods.vue
Normal file
116
pages/market/goods.vue
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="goods-cover">
|
||||||
|
<swiper class="swiper" circular indicator-dots indicator-active-color="#e93340">
|
||||||
|
<swiper-item v-for="(item, index) in cover" :key="index">
|
||||||
|
<view class="swiper-item">
|
||||||
|
<image class="swiper-cover" :src="item" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<view class="info-item">
|
||||||
|
<label>锚定商品</label>
|
||||||
|
{{info.name}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>商品规格</label>
|
||||||
|
{{info.skusUnit}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>提供企业</label>
|
||||||
|
{{info.companyName}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>企业诚信</label>
|
||||||
|
{{info.integrity}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>权证销量</label>
|
||||||
|
{{info.sales}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>发布时间</label>
|
||||||
|
{{info.createdAt}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { goods } from '@/apis/interfaces/goods'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cover: [],
|
||||||
|
info : {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
goods(this.$Route.query.id).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.cover = res.pictures
|
||||||
|
this.info = {
|
||||||
|
name : res.name,
|
||||||
|
companyName : res.company.name,
|
||||||
|
createdAt : res.created_at,
|
||||||
|
sales : res.sales,
|
||||||
|
integrity : res.company.integrity,
|
||||||
|
skusUnit : res.skus[0].unit
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 数权
|
||||||
|
.goods-cover{
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 100%;
|
||||||
|
position: relative;
|
||||||
|
background: #f5f5f5;
|
||||||
|
.swiper{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.swiper-item{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.swiper-cover{
|
||||||
|
@extend .swiper-item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 锚定商品详情
|
||||||
|
.info{
|
||||||
|
background: white;
|
||||||
|
padding: $padding;
|
||||||
|
.info-item{
|
||||||
|
padding-left: 200rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
@extend .nowrap;
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
153
pages/market/index.vue
Normal file
153
pages/market/index.vue
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="tabs">
|
||||||
|
<view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view>
|
||||||
|
<view class="tabs-item" :class="{'show': tabIndex == 1}" @click="onTabs" data-index="1">
|
||||||
|
价格
|
||||||
|
<image
|
||||||
|
class="icon"
|
||||||
|
mode="widthFix" :src="require(marketType == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="lists">
|
||||||
|
<view class="item" v-for="(item, index) in marketArray" :key="index" @click="onDetails(item)">
|
||||||
|
<image class="cover" :src="item.goods.cover" mode="aspectFill"></image>
|
||||||
|
<view class="content">
|
||||||
|
<view class="title nowrap">数字权证<text>{{item.surplus}}/{{item.stock}}</text></view>
|
||||||
|
<view class="text nowrap">锚定商品：{{item.goods.goods_name}}</view>
|
||||||
|
<view class="text nowrap">提供企业：{{item.company.name}}</view>
|
||||||
|
<view class="text nowrap">转让用户：{{item.user.nickname}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="price">￥{{item.price}}/个</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { markets } from '@/apis/interfaces/market'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabIndex : 0,
|
||||||
|
marketType : 'asc',
|
||||||
|
marketArray : [],
|
||||||
|
page : {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getMarkets()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 筛选产品
|
||||||
|
onTabs(e){
|
||||||
|
let index = e.target.dataset.index
|
||||||
|
if(index == 0 && index == this.tabIndex) return
|
||||||
|
if(index == 1 && index == this.tabIndex) this.marketType = this.marketType == 'asc' ? 'desc': 'asc'
|
||||||
|
this.tabIndex = index
|
||||||
|
this.getMarkets()
|
||||||
|
},
|
||||||
|
// 获取转让市场
|
||||||
|
getMarkets(){
|
||||||
|
markets({
|
||||||
|
sort: this.tabIndex == 1 ? this.marketType : ''
|
||||||
|
}).then(res => {
|
||||||
|
this.marketArray = res.data
|
||||||
|
this.page = res.page
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 转让商品详情
|
||||||
|
onDetails(e){
|
||||||
|
this.$Router.push({name: 'marketDetails', params: {marketId: e.market_id}})
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onNavigationBarButtonTap(){
|
||||||
|
this.$Router.push({name: "marketLogs"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tabs{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
background: white;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-align: center;
|
||||||
|
.tabs-item{
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
.icon{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: $margin / 3;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
&.show{
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 列表
|
||||||
|
.lists{
|
||||||
|
padding: 70rpx $padding $padding;
|
||||||
|
.item{
|
||||||
|
min-height: 168rpx;
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
margin-top: $margin;
|
||||||
|
padding: $padding;
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
top: $padding;
|
||||||
|
width: 168rpx;
|
||||||
|
height: 168rpx;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding-left: calc(168rpx + #{$padding});
|
||||||
|
.title{
|
||||||
|
position: relative;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 52rpx;
|
||||||
|
padding-right: 60rpx;
|
||||||
|
text{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 60rpx;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
padding-top: $padding - 10;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
text-align: right;
|
||||||
|
border-top: solid 1rpx $border-color;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
166
pages/market/logs.vue
Normal file
166
pages/market/logs.vue
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="tabs" v-if="$Route.query.type === 'my'">
|
||||||
|
<view class="item" :class="{ 'show' : tab == 'sell'}" @click="onTasb('sell')">我转让的</view>
|
||||||
|
<view class="item" :class="{ 'show' : tab == 'buys' }" @click="onTasb('buys')">我买到的</view>
|
||||||
|
</view>
|
||||||
|
<block v-if="logs.length > 0">
|
||||||
|
<view :class="{'paddingTop': $Route.query.type === 'my'}">
|
||||||
|
<view class="logs" v-for="(item, index) in logs" :key="index">
|
||||||
|
<view class="logs-item">
|
||||||
|
<label>交易权证</label>
|
||||||
|
{{item.goods.goods_name}}
|
||||||
|
</view>
|
||||||
|
<view class="logs-item">
|
||||||
|
<label>交易单价</label>
|
||||||
|
￥{{item.price}}
|
||||||
|
</view>
|
||||||
|
<view class="logs-item">
|
||||||
|
<label>交易数量</label>
|
||||||
|
{{item.qty}}
|
||||||
|
</view>
|
||||||
|
<view class="logs-item">
|
||||||
|
<label>转让用户</label>
|
||||||
|
{{item.sellUser.nickname}}
|
||||||
|
</view>
|
||||||
|
<view class="logs-item">
|
||||||
|
<label>购买用户</label>
|
||||||
|
{{item.buyUser.nickname}}
|
||||||
|
</view>
|
||||||
|
<view class="logs-item">
|
||||||
|
<label>交易时间</label>
|
||||||
|
{{item.created_at}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="list-null">
|
||||||
|
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix" />
|
||||||
|
<view class="sub-title">暂无数据</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { marketsLogs, marketsOrdersLogs } from '@/apis/interfaces/market'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
logs: [],
|
||||||
|
page: {},
|
||||||
|
tab : 'sell'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
onTasb(e){
|
||||||
|
this.tab = e
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
// 获取列表
|
||||||
|
getList(){
|
||||||
|
if(this.$Route.query.type === 'my'){
|
||||||
|
marketsOrdersLogs({}, this.tab).then(res =>{
|
||||||
|
console.log(res)
|
||||||
|
this.logs = res.data
|
||||||
|
this.page = res.page
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
marketsLogs().then(res => {
|
||||||
|
this.logs = res.data
|
||||||
|
this.page = res.page
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tabs{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 99;
|
||||||
|
background-color: white;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.item{
|
||||||
|
border-bottom: solid 2rpx white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&.show{
|
||||||
|
border-color: $text-price;
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paddingTop{
|
||||||
|
padding-top: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs{
|
||||||
|
background: white;
|
||||||
|
margin-top: $margin;
|
||||||
|
padding: ($padding - 10) $padding;
|
||||||
|
.logs-item{
|
||||||
|
padding-left: 200rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
@extend .nowrap;
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 空提示
|
||||||
|
.list-null{
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
background: white;
|
||||||
|
padding-bottom: 20vh;
|
||||||
|
@extend .vertical;
|
||||||
|
.sub-title{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 288rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.employees-null{
|
||||||
|
text-align: center;
|
||||||
|
line-height: 10vh;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
169
pages/market/management.vue
Normal file
169
pages/market/management.vue
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<view class="NumberWeight">
|
||||||
|
<!-- 有订单列表 -->
|
||||||
|
<view v-if="lists.length > 0">
|
||||||
|
<block v-for="(item, index) in lists" :key="index">
|
||||||
|
<view class="order-item">
|
||||||
|
<view class="order-info">
|
||||||
|
<image class="order-cover" :src="item.goods.cover" mode="aspectFill"></image>
|
||||||
|
<view class="title">数字权证<text>{{item.surplus}}/{{item.stock}}</text></view>
|
||||||
|
<view class="text">锚定商品：{{item.goods.goods_name}}</view>
|
||||||
|
<view class="text">交易哈希：{{item.hash}}</view>
|
||||||
|
<view class="text">发布时间：{{item.created_at}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="order-tool">
|
||||||
|
<view class="price">{{item.price}}/个</view>
|
||||||
|
<view class="order-btn" v-if="item.status.value === 1" @click="removeGoods(item.market_id, index)">取消转让</view>
|
||||||
|
<view class="order-status" v-if="item.status.value === 2">{{item.status.text}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<!-- 没有订单列表 -->
|
||||||
|
<no-list v-if="lists.length === 0" name="no-order" txt="暂无数据~" />
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { marketsMag, marketsCancel } from '@/apis/interfaces/market';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lists: [],
|
||||||
|
page: 1,
|
||||||
|
total: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.total > this.lists.length) {
|
||||||
|
this.page = this.page + 1;
|
||||||
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '吼吼吼~我是有底的~',
|
||||||
|
type: 'error',
|
||||||
|
icon: false,
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
let data = {
|
||||||
|
perPage: 10,
|
||||||
|
page: this.page
|
||||||
|
};
|
||||||
|
marketsMag(data)
|
||||||
|
.then(res => {
|
||||||
|
console.log(res.markets.data);
|
||||||
|
this.lists = this.lists.concat(res.markets.data);
|
||||||
|
this.total = res.markets.page.total;
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.message,
|
||||||
|
type: 'error',
|
||||||
|
icon: false,
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消转让
|
||||||
|
removeGoods(id, index) {
|
||||||
|
marketsCancel(id).then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
icon : 'none',
|
||||||
|
title: res
|
||||||
|
})
|
||||||
|
let statusObj = this.lists[index]
|
||||||
|
statusObj.status = {
|
||||||
|
value: 2,
|
||||||
|
text : '已取消',
|
||||||
|
}
|
||||||
|
this.$set(this.lists, index, statusObj)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon : 'none',
|
||||||
|
title: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onNavigationBarButtonTap(){
|
||||||
|
this.$Router.push({name: "marketLogs", params: {type: 'my'}})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.NumberWeight {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// 订单列表
|
||||||
|
.order-item {
|
||||||
|
background-color: white;
|
||||||
|
margin: $margin;
|
||||||
|
border-radius: $radius;
|
||||||
|
padding: $padding;
|
||||||
|
.order-info{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 188rpx;
|
||||||
|
min-height: 168rpx;
|
||||||
|
.order-cover{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 168rpx;
|
||||||
|
width: 168rpx;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-color;
|
||||||
|
line-height: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
text{
|
||||||
|
font-size: 80%;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
line-height: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order-tool{
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
padding-top: $padding - 10;
|
||||||
|
border-top: solid 1rpx $border-color;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.price{
|
||||||
|
color: $text-price;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
.order-btn{
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
padding: 0 $padding;
|
||||||
|
line-height: 50rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
.order-status{
|
||||||
|
color: $text-gray-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
239
pages/market/transfer.vue
Normal file
239
pages/market/transfer.vue
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="!loding">
|
||||||
|
<!-- 产品信息 -->
|
||||||
|
<view class="goods">
|
||||||
|
<image class="cover" :src="info.goods.cover" mode="aspectFill"></image>
|
||||||
|
<view class="content">
|
||||||
|
<view class="title nowrap">数字权证</view>
|
||||||
|
<view class="text nowrap">锚定商品：{{info.goods.goods_name}}</view>
|
||||||
|
<view class="text nowrap">提供企业：{{info.goods.company.name}}</view>
|
||||||
|
<view class="text nav-goods nowrap" @click="onGoods">查看锚定商品信息<uni-icons type="arrowright" size="12" color="#e93340"></uni-icons></view>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<view class="info-item">
|
||||||
|
<label>权证销售单价</label>
|
||||||
|
1000.00
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>拥有数量</label>
|
||||||
|
{{info.account.balance}}
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>转让价格</label>
|
||||||
|
<input class="info-input" type="digit" v-model="pirce" placeholder="输入转让价格" maxlength="5" @blur="calculatePirce" />
|
||||||
|
</view>
|
||||||
|
<view class="info-item info-flex">
|
||||||
|
<label>转让数量</label>
|
||||||
|
<uni-number-box class="info-number" v-model='stock' :min="1" :max="info.account.balance" @change="countPrice"></uni-number-box>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<label>预估转让收益</label>
|
||||||
|
<view class="price">{{forecast}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<button class="buy-btn" type="default" @click="onCreate">确认转让</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { marketsCreateInfo, marketsCreate } from '@/apis/interfaces/market'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loding : true,
|
||||||
|
pirce : '',
|
||||||
|
stock : 1,
|
||||||
|
info : {},
|
||||||
|
forecast: '0.00'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
marketsCreateInfo(this.$Route.query.symbol).then(res =>{
|
||||||
|
this.info = res
|
||||||
|
this.loding = false
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 查看锚定产品
|
||||||
|
onGoods(){
|
||||||
|
this.$Router.push({name: 'marketGoods', params: { id: this.info.goods.goods_id }})
|
||||||
|
},
|
||||||
|
// 转让数量
|
||||||
|
countPrice(e){
|
||||||
|
this.stock = e
|
||||||
|
this.calculatePirce()
|
||||||
|
},
|
||||||
|
// 计算预估收益
|
||||||
|
calculatePirce(){
|
||||||
|
this.forecast = (this.pirce * this.stock).toFixed(2)
|
||||||
|
},
|
||||||
|
// 提交转让市场
|
||||||
|
onCreate(){
|
||||||
|
marketsCreate({
|
||||||
|
symbol : this.$Route.query.symbol,
|
||||||
|
qty : this.stock,
|
||||||
|
price : this.pirce || 0
|
||||||
|
}).then(res => {
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : res,
|
||||||
|
showCancel : false,
|
||||||
|
success : () => {
|
||||||
|
this.$Router.back()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 转让权证
|
||||||
|
.buy-btn{
|
||||||
|
margin: 0 $margin;
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
font-size: $title-size;
|
||||||
|
font-weight: bold;
|
||||||
|
&::after{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 产品信息
|
||||||
|
.goods{
|
||||||
|
min-height: 168rpx;
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
margin: $margin;
|
||||||
|
padding: $padding;
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
top: $padding;
|
||||||
|
width: 168rpx;
|
||||||
|
height: 168rpx;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding-left: calc(168rpx + #{$padding});
|
||||||
|
.title{
|
||||||
|
position: relative;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 52rpx;
|
||||||
|
padding-right: 60rpx;
|
||||||
|
text{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 60rpx;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
&.nav-goods{
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
margin-top: $margin;
|
||||||
|
border-top: solid 1rpx $border-color;
|
||||||
|
padding-top: $padding;
|
||||||
|
.info-item{
|
||||||
|
padding-left: 200rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
&.info-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
@extend .nowrap;
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
.info-input{
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
color: $text-price;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 购买产品
|
||||||
|
.popup {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx 30rpx 30rpx 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background-color: $text-price;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
margin: $padding * 2;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: $padding $padding * 2;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
text{
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
249
pages/store/Spread.vue
Normal file
249
pages/store/Spread.vue
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="codeContent">
|
||||||
|
<image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image>
|
||||||
|
<image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
|
||||||
|
<view class="textContent">
|
||||||
|
<view class="company">
|
||||||
|
<image class="company-logo" :src="companyInfo.cover" mode="aspectFill"></image>
|
||||||
|
<view class="company-cont">
|
||||||
|
<view class="nowrap company-name">{{companyInfo.name}}</view>
|
||||||
|
<view class="company-tips">易货平台</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="code">
|
||||||
|
<image class="code-img" :src="companyInfo.code" mode="aspectFit"></image>
|
||||||
|
<!-- <view class="code-text">简单扫一扫，即可进入平台</view> -->
|
||||||
|
</view>
|
||||||
|
<!-- @click="shareCanvas" -->
|
||||||
|
<view class="codeBnt">
|
||||||
|
扫码推广
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<canvas class="codeImg" canvas-id="qrcodeCard"></canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { companiesCode } from '@/apis/interfaces/store'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
companyInfo : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
companiesCode().then(res=>{
|
||||||
|
this.companyInfo = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 绘制图片
|
||||||
|
shareCanvas(e){
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 下载头像
|
||||||
|
let avatarImg = new Promise(success=>{
|
||||||
|
uni.getImageInfo({
|
||||||
|
src : this.companyInfo.cover,
|
||||||
|
success : res => {
|
||||||
|
success(res.path)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 下载二维码
|
||||||
|
let codeImg = new Promise(success => {
|
||||||
|
uni.getImageInfo({
|
||||||
|
src : this.companyInfo.code,
|
||||||
|
success : res => {
|
||||||
|
success(res.path)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
Promise.all([avatarImg, codeImg]).then(res => {
|
||||||
|
// 绘制海报
|
||||||
|
const ctx = uni.createCanvasContext('qrcodeCard')
|
||||||
|
ctx.save()
|
||||||
|
|
||||||
|
// 绘制背景图片
|
||||||
|
ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603)
|
||||||
|
|
||||||
|
// 绘制头像
|
||||||
|
ctx.drawImage(res[0], 0, 0, 60, 60)
|
||||||
|
|
||||||
|
// 绘制二维码
|
||||||
|
ctx.drawImage(res[1], 140, 250, 110, 110)
|
||||||
|
|
||||||
|
// 文字
|
||||||
|
ctx.setFontSize(16)
|
||||||
|
ctx.fillText(this.companyInfo.name, 194, 180 , 270)
|
||||||
|
|
||||||
|
ctx.setFontSize(16)
|
||||||
|
ctx.fillText('邀请你加入易货平台', 194, 180 , 270)
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.beginPath(); //开始绘制
|
||||||
|
ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
|
||||||
|
ctx.clip();
|
||||||
|
|
||||||
|
// 保存图片
|
||||||
|
ctx.draw(true, () => {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'qrcodeCard',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
success: res => {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
success : res=>{
|
||||||
|
if (res.errMsg == "saveImageToPhotosAlbum:ok"){
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享海报已保存至相册',
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail : err=>{
|
||||||
|
if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
|
||||||
|
confirmColor: '#d82526',
|
||||||
|
confirmText : '去设置',
|
||||||
|
success : res=>{
|
||||||
|
if (res.confirm){
|
||||||
|
uni.openSetting()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}).catch(err=>{
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报下载，请检查网络',
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
background-color: #e93340;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codeContent {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
.codeContent-back {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.codeContent-cont {
|
||||||
|
left: 5%;
|
||||||
|
width: 90%;
|
||||||
|
top: 100px;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.codeContent-tips {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 20rpx;
|
||||||
|
width: 200rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.textContent {
|
||||||
|
position: absolute;
|
||||||
|
padding: 20rpx 20rpx 0 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 70%;
|
||||||
|
z-index: 3;
|
||||||
|
left: 15%;
|
||||||
|
right: 15%;
|
||||||
|
top: 140px;
|
||||||
|
}
|
||||||
|
.company {
|
||||||
|
width: 100%;
|
||||||
|
.company-logo {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.company-cont {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 230rpx;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: 20rpx 20rpx 30rpx 210rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
.company-name {
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
.company-tips {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #787878;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.code {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: $margin;
|
||||||
|
.code-img {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.code-text {
|
||||||
|
color: #787878;
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.codeBnt {
|
||||||
|
background-color: #e1293f;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: #FFFFFF;
|
||||||
|
box-shadow: 4rpx 0 10rpx rgba(155,0,19,.5);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* canvas */
|
||||||
|
.codeImg {
|
||||||
|
position: absolute;
|
||||||
|
left: -1000%;
|
||||||
|
height: 603px;
|
||||||
|
width: 375px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
525
pages/store/basics.vue
Normal file
525
pages/store/basics.vue
Normal file
@@ -0,0 +1,525 @@
|
|||||||
|
<template>
|
||||||
|
<view class="ios-bottom">
|
||||||
|
<view class="info">
|
||||||
|
<view class="item info-logo" @click="updImg('logo', '')">
|
||||||
|
<label>企业LOGO</label>
|
||||||
|
<image :src="logo" mode="aspectFill"></image>
|
||||||
|
<uni-icons class="icon" color="#999" size="18" type="arrowright"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="item info-text">
|
||||||
|
<label>企业简介</label>
|
||||||
|
<textarea v-model="description" placeholder="输入企业简介" />
|
||||||
|
</view>
|
||||||
|
<view class="item info-text">
|
||||||
|
<label>企业地址</label>
|
||||||
|
<input v-model="address" placeholder="输入企业地址" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<block v-for="(module, moduleIndex) in modules" :key="moduleIndex">
|
||||||
|
<view class="module-item" v-if="module.type === 1">
|
||||||
|
<view class="module-title">
|
||||||
|
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||||
|
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||||
|
</view>
|
||||||
|
<view class="module-textarea">
|
||||||
|
<textarea placeholder="输入文字内容" v-model="module.content.content" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="module-item" v-if="module.type === 2">
|
||||||
|
<view class="module-title">
|
||||||
|
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||||
|
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||||
|
</view>
|
||||||
|
<view class="module-imgs">
|
||||||
|
<view
|
||||||
|
class="item"
|
||||||
|
v-for="(item, index) in module.content.image"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
class="cover"
|
||||||
|
:src="item.showpath"
|
||||||
|
mode="aspectFill"
|
||||||
|
@click="openImg(module.content.image, index, 'imgs')"
|
||||||
|
@longpress="removeImg('imgs', moduleIndex, index)"
|
||||||
|
/>
|
||||||
|
<view class="item-input">
|
||||||
|
<input type="text" v-model="item.title" placeholder="输入标题" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item" @click="updImgs(moduleIndex)">
|
||||||
|
<view class="item-upd cover">
|
||||||
|
<uni-icons type="plus" size="20" color="#999"/>
|
||||||
|
<view>上传图片</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="module-hint">点击查看图片，长按删除图片</view>
|
||||||
|
</view>
|
||||||
|
<view class="module-item" v-if="module.type === 3">
|
||||||
|
<view class="module-title">
|
||||||
|
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||||
|
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||||
|
</view>
|
||||||
|
<view class="module-videos">
|
||||||
|
<view class="item">
|
||||||
|
<block v-if="module.content.video_image.showpath != ''">
|
||||||
|
<image
|
||||||
|
class="cover"
|
||||||
|
:src="module.content.video_image.showpath"
|
||||||
|
mode="aspectFill"
|
||||||
|
@click="openImg([module.content.video_image.showpath], 0, 'videos')"
|
||||||
|
@longpress="removeImg('videoCover', moduleIndex, '')"
|
||||||
|
/>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="item-upd" @click="updImg('videoCover', moduleIndex)">
|
||||||
|
<uni-icons type="plus" size="20" color="#999"/>
|
||||||
|
<view>上传视频封面</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<video
|
||||||
|
class="cover"
|
||||||
|
v-if="module.content.video_url.showpath != ''"
|
||||||
|
:src="module.content.video_url.showpath"
|
||||||
|
@longpress="removeImg('video', moduleIndex, '')"
|
||||||
|
/>
|
||||||
|
<view class="item-upd" @click="updImg('video', moduleIndex)" v-else>
|
||||||
|
<uni-icons type="plus" size="20" color="#999"/>
|
||||||
|
<view>上传视频</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="module-hint">点击查看封面/视频，长按删除封面/视频</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="add-modules" @click="addModule">
|
||||||
|
<uni-icons class="icon" type="plus" size="18" color="#c82626"/> 添加展示模块
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { basicsInfo, basicsConfig } from '@/apis/interfaces/store'
|
||||||
|
import { uploads } from '@/apis/interfaces/uploading'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
logo : '',
|
||||||
|
description : '',
|
||||||
|
address : '',
|
||||||
|
modules : [],
|
||||||
|
modulesType : []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
Promise.all([basicsInfo('GET', {}), basicsConfig()]).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
|
||||||
|
let info = res[0]
|
||||||
|
this.logo = info.base.cover
|
||||||
|
this.description = info.base.description
|
||||||
|
this.modules = info.extends
|
||||||
|
this.address = info.info.address
|
||||||
|
this.modulesType = res[1]
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 图片预览
|
||||||
|
openImg(paths, index, type){
|
||||||
|
if(type === 'imgs'){
|
||||||
|
paths = paths.map(val => {
|
||||||
|
return val.showpath
|
||||||
|
})
|
||||||
|
}
|
||||||
|
uni.previewImage({
|
||||||
|
urls : paths,
|
||||||
|
current : index,
|
||||||
|
indicator: 'number'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
removeImg(type, moduleIndex, index){
|
||||||
|
let modulesObj = this.modules[moduleIndex]
|
||||||
|
if(type === 'videoCover'){
|
||||||
|
modulesObj.content.video_image.showpath = ''
|
||||||
|
modulesObj.content.video_image.path = ''
|
||||||
|
}
|
||||||
|
if(type === 'imgs'){
|
||||||
|
modulesObj.content.image.splice(index, 1)
|
||||||
|
}
|
||||||
|
if(type === 'video'){
|
||||||
|
modulesObj.content.video_url.showpath = ''
|
||||||
|
modulesObj.content.video_url.path = ''
|
||||||
|
}
|
||||||
|
this.$set(this.modules, moduleIndex, modulesObj)
|
||||||
|
},
|
||||||
|
// 单图上传
|
||||||
|
updImg(type, index){
|
||||||
|
switch(type){
|
||||||
|
case 'logo':
|
||||||
|
uni.chooseImage({
|
||||||
|
crop: {width: 300, height: 300},
|
||||||
|
success: path=> {
|
||||||
|
uploads([{
|
||||||
|
name: 'logo',
|
||||||
|
uri : path.tempFilePaths[0]
|
||||||
|
}]).then(res => {
|
||||||
|
this.logo = res.url[0]
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'videoCover':
|
||||||
|
uni.chooseImage({
|
||||||
|
crop: {width: 500, height: 350},
|
||||||
|
success: path=> {
|
||||||
|
uploads([{
|
||||||
|
name: 'logo',
|
||||||
|
uri : path.tempFilePaths[0]
|
||||||
|
}]).then(res => {
|
||||||
|
let modulesObj = this.modules[index]
|
||||||
|
modulesObj.content.video_image.showpath = res.url[0]
|
||||||
|
modulesObj.content.video_image.path = res.path[0]
|
||||||
|
this.$set(this.modules, index, modulesObj)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'video':
|
||||||
|
uni.chooseVideo({
|
||||||
|
success: path=> {
|
||||||
|
uploads([{
|
||||||
|
name: 'video',
|
||||||
|
uri : path.tempFilePath
|
||||||
|
}]).then(res => {
|
||||||
|
let modulesObj = this.modules[index]
|
||||||
|
modulesObj.content.video_url.showpath = res.url[0]
|
||||||
|
modulesObj.content.video_url.path = res.path[0]
|
||||||
|
this.$set(this.modules, index, modulesObj)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 批量上传图片
|
||||||
|
updImgs(index){
|
||||||
|
uni.chooseImage({
|
||||||
|
success: res=>{
|
||||||
|
let path = res.tempFiles.map((val, index) => {
|
||||||
|
return {
|
||||||
|
name: 'uploads' + index,
|
||||||
|
uri : val.path
|
||||||
|
}
|
||||||
|
})
|
||||||
|
uploads(path).then(pathRes => {
|
||||||
|
let modulesObj = this.modules[index],
|
||||||
|
paths = []
|
||||||
|
for(let i in pathRes.path){
|
||||||
|
paths.push({
|
||||||
|
showpath: pathRes.url[i],
|
||||||
|
path : pathRes.path[i],
|
||||||
|
title : ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
modulesObj.content.image = [...modulesObj.content.image, ...paths]
|
||||||
|
this.$set(this.modules, index, modulesObj)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 添加展示模块
|
||||||
|
addModule(){
|
||||||
|
let modulesList = this.modulesType.map(val => {
|
||||||
|
return val.value
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: modulesList,
|
||||||
|
success : res => {
|
||||||
|
let content
|
||||||
|
switch(this.modulesType[res.tapIndex].id){
|
||||||
|
case 1:
|
||||||
|
content = {
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
content = {
|
||||||
|
image: [{
|
||||||
|
showpath: '',
|
||||||
|
path : '',
|
||||||
|
title : ''
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
content = {
|
||||||
|
video_image: {
|
||||||
|
showpath: '',
|
||||||
|
path : ''
|
||||||
|
},
|
||||||
|
video_url : {
|
||||||
|
showpath: '',
|
||||||
|
path : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
this.modules.push({
|
||||||
|
type : this.modulesType[res.tapIndex].id,
|
||||||
|
title : '',
|
||||||
|
content : content
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除展示模块
|
||||||
|
removeModule(index){
|
||||||
|
this.modules.splice(index, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存基础信息
|
||||||
|
onNavigationBarButtonTap(e){
|
||||||
|
basicsInfo('PUT', {
|
||||||
|
cover : this.logo,
|
||||||
|
description : this.description,
|
||||||
|
address : this.address,
|
||||||
|
extends : this.modules
|
||||||
|
}).then(res => {
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : '基本信息已保存',
|
||||||
|
showCancel : false,
|
||||||
|
success : modalRes=> {
|
||||||
|
if(modalRes.confirm){
|
||||||
|
this.$Router.back()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 基础信息
|
||||||
|
.info{
|
||||||
|
background: white;
|
||||||
|
padding: 0 $padding;
|
||||||
|
.item{
|
||||||
|
position: relative;
|
||||||
|
padding: $padding 0 $padding 200rpx;
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: -$padding;
|
||||||
|
content: " ";
|
||||||
|
height: 1rpx;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
&:last-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-logo{
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 40rpx;
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
}
|
||||||
|
image{
|
||||||
|
width: 88rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: top;
|
||||||
|
background: $border-color-lg;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-text{
|
||||||
|
label{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
textarea{
|
||||||
|
line-height: 40rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
height: 40rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 模块
|
||||||
|
.add-modules{
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: $text-price;
|
||||||
|
background: white;
|
||||||
|
margin-top: $margin;
|
||||||
|
.icon{
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: $margin/3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 展示模块
|
||||||
|
.module-item{
|
||||||
|
background: white;
|
||||||
|
padding: $padding/2 $padding;
|
||||||
|
margin-top: $margin;
|
||||||
|
.module-title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: $padding/2;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
.title-input{
|
||||||
|
width: calc(100% - 150rpx);
|
||||||
|
height: 70rpx;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
.remove-btn{
|
||||||
|
line-height: 70rpx;
|
||||||
|
color: $text-price;
|
||||||
|
text-align: right;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.module-textarea{
|
||||||
|
padding: $padding 0 $padding/2;
|
||||||
|
width: 100%;
|
||||||
|
font-size: $title-size;
|
||||||
|
line-height: 50rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
}
|
||||||
|
.module-imgs{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top: $padding/2;
|
||||||
|
margin-left: -10rpx;
|
||||||
|
margin-right: -10rpx;
|
||||||
|
.item{
|
||||||
|
position: relative;
|
||||||
|
background: #F8F8F8;
|
||||||
|
width: calc(25% - 20rpx);
|
||||||
|
padding-top: calc(25% - 20rpx);
|
||||||
|
margin: 10rpx;
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.item-input{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba($color: #000000, $alpha: .7);
|
||||||
|
input{
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 4;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-upd{
|
||||||
|
@extend .vertical;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.module-hint{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
padding: $padding/2 0;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
.module-videos{
|
||||||
|
display: flex;
|
||||||
|
padding: $padding 0 ($padding/2);
|
||||||
|
margin-left: -10rpx;
|
||||||
|
margin-right: -10rpx;
|
||||||
|
.item{
|
||||||
|
position: relative;
|
||||||
|
width: calc(50% - #{$margin/2});
|
||||||
|
padding-top: calc(35% - #{$margin/2});
|
||||||
|
background: #f8f8f8;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
.item-upd{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray-m;
|
||||||
|
line-height: 40rpx;
|
||||||
|
@extend .vertical;
|
||||||
|
}
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
365
pages/store/customer.vue
Normal file
365
pages/store/customer.vue
Normal file
@@ -0,0 +1,365 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- tabs -->
|
||||||
|
<view class="tabs">
|
||||||
|
<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日成交</view>
|
||||||
|
<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月成交</view>
|
||||||
|
<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年成交</view>
|
||||||
|
</view>
|
||||||
|
<!-- 统计信息 -->
|
||||||
|
<view class="statistics">
|
||||||
|
<view class="statistics-flex">
|
||||||
|
<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
|
||||||
|
<view class="statistics-date">
|
||||||
|
{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
<view class="statistics-lay" :class="{ 'show' : sort != '' || payType != '' || channel != ''}" @click="onScreening">
|
||||||
|
筛选 <uni-icons class="arrowdown" type="settings" color="gray"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="statistics-text">
|
||||||
|
<text>成交产品数量 {{visitor.goods_count}} 人</text>
|
||||||
|
<text>成交产品金额 {{visitor.total}} 元</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 数据列表 -->
|
||||||
|
<view class="lists">
|
||||||
|
<block v-if="orders.length > 0">
|
||||||
|
<view class="item" v-for="(item, index) in orders" :key="index">
|
||||||
|
<image class="cover" :src="item.user.avatar" mode="aspectFill"></image>
|
||||||
|
<view class="title nowrap">
|
||||||
|
{{item.user.nickname}}
|
||||||
|
<view class="type">{{item.amount}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="sub-title nowrap">订单号码: {{item.order_no}}</view>
|
||||||
|
<view class="sub-title nowrap">订单时间: {{item.created_at}}</view>
|
||||||
|
<view class="sub-tabs">
|
||||||
|
<text>{{item.driver}}</text>
|
||||||
|
<text>{{item.channel}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="list-null">
|
||||||
|
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
|
||||||
|
<view class="sub-title">暂无相关成交客户记录</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<!-- 列表筛选 -->
|
||||||
|
<uni-popup ref="settingsPopup" background-color="#FFFFFF" @maskClick="onReset">
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="title">排序方式</view>
|
||||||
|
<view class="popup-choose-flex">
|
||||||
|
<view class="item" :class="{'show' : sort == 'money_asc'}" @click="sort = 'money_asc'">金额从低到高</view>
|
||||||
|
<view class="item" :class="{'show' : sort == 'money_desc'}" @click="sort = 'money_desc'">金额从高到低</view>
|
||||||
|
<view class="item" :class="{'show' : sort == 'sold_asc'}" @click="sort = 'sold_asc'">销量从低到高</view>
|
||||||
|
<view class="item" :class="{'show' : sort == 'sold_desc'}" @click="sort = 'sold_desc'">销量从高到低</view>
|
||||||
|
</view>
|
||||||
|
<view class="title">支付方式</view>
|
||||||
|
<view class="popup-choose-flex">
|
||||||
|
<view class="item" :class="{'show' : payType == 'eb'}" @click="payType = 'eb'">易币交易</view>
|
||||||
|
<view class="item" :class="{'show' : payType == 'money'}" @click="payType = 'money'">现金交易</view>
|
||||||
|
</view>
|
||||||
|
<view class="title">成交渠道</view>
|
||||||
|
<view class="popup-choose-flex">
|
||||||
|
<view class="item" :class="{'show' : channel == 'app'}" @click="channel = 'app'">APP</view>
|
||||||
|
<view class="item" :class="{'show' : channel == 'mini'}" @click="channel = 'mini'">自媒体</view>
|
||||||
|
</view>
|
||||||
|
<view class="popup-btns">
|
||||||
|
<view class="item" @click="onReset">重置</view>
|
||||||
|
<view class="item" @click="onSettings">确定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ios-bottom"></view>
|
||||||
|
</uni-popup>
|
||||||
|
<!-- :status="more" -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import getDate from '@/public/date'
|
||||||
|
import { orderUsers } from '@/apis/interfaces/store'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabsIndex : 'day',
|
||||||
|
dateValue : '',
|
||||||
|
endDate : '',
|
||||||
|
visitor : {
|
||||||
|
day: 0,
|
||||||
|
all: 0
|
||||||
|
},
|
||||||
|
orders : [],
|
||||||
|
sort : '',
|
||||||
|
payType : '',
|
||||||
|
channel : '',
|
||||||
|
// 分页
|
||||||
|
pageStatus : '',
|
||||||
|
page : 1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
getDate().then(res => {
|
||||||
|
this.dateValue = res
|
||||||
|
this.endDate = res
|
||||||
|
this.getLists()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// tabs筛选
|
||||||
|
onTbas(type){
|
||||||
|
getDate(type).then(res => {
|
||||||
|
this.tabsIndex = type
|
||||||
|
this.dateValue = res
|
||||||
|
this.page = 1
|
||||||
|
this.getLists()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onReset(){
|
||||||
|
this.sort = ''
|
||||||
|
this.payType = ''
|
||||||
|
this.channel = ''
|
||||||
|
},
|
||||||
|
onSettings(){
|
||||||
|
this.getLists()
|
||||||
|
this.$refs.settingsPopup.close()
|
||||||
|
},
|
||||||
|
// 日期筛选
|
||||||
|
pickerDate(e){
|
||||||
|
let dateValue = e.detail.value
|
||||||
|
this.dateValue = dateValue
|
||||||
|
this.getLists()
|
||||||
|
},
|
||||||
|
// 列表筛选
|
||||||
|
onScreening(){
|
||||||
|
this.$refs.settingsPopup.open('bottom')
|
||||||
|
},
|
||||||
|
// 获取列表
|
||||||
|
getLists(){
|
||||||
|
orderUsers({
|
||||||
|
type : this.tabsIndex,
|
||||||
|
date : this.dateValue,
|
||||||
|
sort : this.sort,
|
||||||
|
pay_type : this.payType,
|
||||||
|
channel : this.channel,
|
||||||
|
page : this.page
|
||||||
|
}).then(res => {
|
||||||
|
if(res.orders.page.current === 1){
|
||||||
|
this.orders = []
|
||||||
|
}
|
||||||
|
this.visitor = res.visitor
|
||||||
|
this.orders = this.orders.concat(res.orders.data)
|
||||||
|
this.page = res.orders.page.current
|
||||||
|
this.pageStatus = res.orders.page.has_more ? 'more': 'noMore'
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
if(this.pageStatus == 'more'){
|
||||||
|
this.pageStatus = 'loading'
|
||||||
|
this.page += 1
|
||||||
|
this.getLists()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 筛选层
|
||||||
|
.popup-content{
|
||||||
|
padding: $padding * 2;
|
||||||
|
.title{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-color;
|
||||||
|
margin-top: $margin;
|
||||||
|
}
|
||||||
|
.popup-choose-flex{
|
||||||
|
padding: $padding /2 0;
|
||||||
|
margin: 0 -($margin - 20rpx);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.item{
|
||||||
|
width: calc(33.33% - #{$margin - 10});
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
text-align: center;
|
||||||
|
background: $border-color-lg;
|
||||||
|
line-height: 68rpx;
|
||||||
|
margin: $margin - 20;
|
||||||
|
color: $text-gray;
|
||||||
|
border:solid 1rpx $border-color-lg;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&.show{
|
||||||
|
border:solid 1rpx $text-price;
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popup-btns{
|
||||||
|
padding-top: $padding*2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 -$margin/2;
|
||||||
|
.item{
|
||||||
|
margin: $margin/2;
|
||||||
|
color: $text-price;
|
||||||
|
background: rgba($color: $text-price, $alpha: .1);
|
||||||
|
width: calc(50% - #{$margin});
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
&:last-child{
|
||||||
|
background-color: $text-price;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 空提示
|
||||||
|
.list-null{
|
||||||
|
width: 100vw;
|
||||||
|
height: 40vh;
|
||||||
|
background: white;
|
||||||
|
text-align: center;
|
||||||
|
@extend .vertical;
|
||||||
|
.sub-title{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 288rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// content
|
||||||
|
.content{
|
||||||
|
padding-top: 80rpx;
|
||||||
|
}
|
||||||
|
// tabs
|
||||||
|
.tabs{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
background: white;
|
||||||
|
justify-content: space-around;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
.item.show{
|
||||||
|
color: $text-price;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 统计信息
|
||||||
|
.statistics{
|
||||||
|
margin-top: $margin;
|
||||||
|
background-color: white;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
padding: $padding;
|
||||||
|
.statistics-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.statistics-date{
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 60rpx;
|
||||||
|
.arrowdown{
|
||||||
|
margin-left: $margin/2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.statistics-lay{
|
||||||
|
font-size: $title-size-sm;;
|
||||||
|
color: gray;
|
||||||
|
line-height: 50rpx;
|
||||||
|
&.show{
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
.arrowdown{
|
||||||
|
margin-left: $margin/2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistics-text{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: gray;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text{
|
||||||
|
margin-left: $margin;
|
||||||
|
&:first-child{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 客户列表
|
||||||
|
.lists{
|
||||||
|
padding: $padding/2 0;
|
||||||
|
background: white;
|
||||||
|
.item{
|
||||||
|
padding: ($padding - 10) $padding ($padding - 10) ($padding*2 + 68);
|
||||||
|
position: relative;
|
||||||
|
min-height: 68rpx;
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding*2 + 68;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
content: ' ';
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
}
|
||||||
|
&:first-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
top: $padding - 10;
|
||||||
|
width: 68rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
padding-right: 200rpx;
|
||||||
|
position: relative;
|
||||||
|
line-height: 58rpx;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
.type{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 180rpx;
|
||||||
|
text-align: right;
|
||||||
|
color: $text-price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
.sub-tabs{
|
||||||
|
padding-top: $padding/2;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
text{
|
||||||
|
margin-right: $margin - 10;
|
||||||
|
background: $border-color-lg;
|
||||||
|
color: $text-gray;
|
||||||
|
padding: 0 ($padding/2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
141
pages/store/deliver.vue
Normal file
141
pages/store/deliver.vue
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 订单分类 -->
|
||||||
|
<scroll-view class="nav" scroll-x="true" scroll-with-animation="true">
|
||||||
|
<view :class="['nav-item', selectNavId === item.state ? 'nav-item-selected':'']" v-for="(item,index) in navList" :key="index" @click="selectNav(item.state)">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<store-order v-if="returnInfo.length > 0" :list="returnInfo" listType="deliver" />
|
||||||
|
|
||||||
|
<view v-else class="pack-center">
|
||||||
|
<image src="../../static/icons/order-null.png"></image>
|
||||||
|
<view>您还没有相关订单</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { storeDeliver } from '@/apis/interfaces/store'
|
||||||
|
import storeOrder from '@/components/store-order/store-order'
|
||||||
|
export default {
|
||||||
|
comments:{
|
||||||
|
storeOrder
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
returnInfo : '' ,// 列表
|
||||||
|
navList : [{
|
||||||
|
name : '待发货',
|
||||||
|
state : '1'
|
||||||
|
},{
|
||||||
|
name : '已发货',
|
||||||
|
state : '2'
|
||||||
|
},{
|
||||||
|
name : '待提货',
|
||||||
|
state : '3'
|
||||||
|
},{
|
||||||
|
name : '已提货',
|
||||||
|
state : '4'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectNavId : '1'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 获取退货单列表
|
||||||
|
this.returnData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 退货单列表
|
||||||
|
returnData(){
|
||||||
|
storeDeliver(this.selectNavId).then(res=>{
|
||||||
|
console.log(res)
|
||||||
|
this.returnInfo = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择订单
|
||||||
|
selectNav(id) {
|
||||||
|
if (this.selectNavId !== id) {
|
||||||
|
this.selectNavId = id
|
||||||
|
this.returnData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 我要发货
|
||||||
|
goSend(orderNo) {
|
||||||
|
console.log(orderNo)
|
||||||
|
return
|
||||||
|
uni.showModal({
|
||||||
|
title: '是否签收此订单？',
|
||||||
|
success: res => {
|
||||||
|
if(res.confirm) {
|
||||||
|
storeSign(orderNo).then(() => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '签收成功'
|
||||||
|
})
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.returnData()
|
||||||
|
},3000)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 订单nav
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: $title-size*0.95;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666;
|
||||||
|
position: sticky;
|
||||||
|
top: 0rpx;
|
||||||
|
z-index: 1;
|
||||||
|
.nav-item {
|
||||||
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
border-bottom: solid 4rpx #fff;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
}
|
||||||
|
.nav-item-selected {
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暂无订单
|
||||||
|
.pack-center {
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
padding-top: 50%;
|
||||||
|
image {
|
||||||
|
width: $uni-img-size-lg * 2;
|
||||||
|
height:$uni-img-size-lg * 2;
|
||||||
|
border-radius: $uni-border-radius-circle;
|
||||||
|
margin-bottom: $margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
166
pages/store/deliverForm.vue
Normal file
166
pages/store/deliverForm.vue
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<form @submit="sendSubmit">
|
||||||
|
<view class="nickname">
|
||||||
|
<view class="examineTitle">
|
||||||
|
选择发货方式
|
||||||
|
</view>
|
||||||
|
<view class="toExamine" v-if="send.sendWay[send.sendIndex]">
|
||||||
|
<picker mode="selector" :value="send.sendIndex" range-key="name" :range="send.sendWay" @change="wayChange">
|
||||||
|
<view>{{send.sendWay[send.sendIndex].name}}</view>
|
||||||
|
</picker>
|
||||||
|
<image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="nickname" v-if="send.sendIndex == 0">
|
||||||
|
<view class="examineTitle">
|
||||||
|
选择物流公司
|
||||||
|
</view>
|
||||||
|
<view class="toExamine" v-if="state.array[state.index]">
|
||||||
|
<picker mode="selector" :value="state.index" range-key="name" :range="state.array" @change="sexChange">
|
||||||
|
<view>{{state.array[state.index].name}}</view>
|
||||||
|
</picker>
|
||||||
|
<image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="nickname" v-if="send.sendIndex == 0">
|
||||||
|
<view class="examineTitle">
|
||||||
|
填写物流单号
|
||||||
|
</view>
|
||||||
|
<input class="remarks" @blur="bindExpressNo" auto-height placeholder="" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选择其他方式显示 -->
|
||||||
|
<view class="nickname" v-if="send.sendIndex == 1">
|
||||||
|
<view class="examineTitle">
|
||||||
|
送货人姓名
|
||||||
|
</view>
|
||||||
|
<input class="remarks" name="courier_name" auto-height placeholder="" />
|
||||||
|
</view>
|
||||||
|
<view class="nickname" v-if="send.sendIndex == 1">
|
||||||
|
<view class="examineTitle">
|
||||||
|
送货人联系方式
|
||||||
|
</view>
|
||||||
|
<input class="remarks" name="courier_mobile" auto-height placeholder="" />
|
||||||
|
</view>
|
||||||
|
<button class="submit" form-type="submit" type="default">提交</button>
|
||||||
|
</form>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { deliverFront, deliverForm } from '@/apis/interfaces/store'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
send : {
|
||||||
|
sendWay : [{
|
||||||
|
id : 'post',
|
||||||
|
name : '邮寄'
|
||||||
|
},{
|
||||||
|
id : 'other',
|
||||||
|
name : '其他'
|
||||||
|
}],
|
||||||
|
sendIndex : 0,
|
||||||
|
},
|
||||||
|
state : {
|
||||||
|
// 快递筛选
|
||||||
|
array : [],
|
||||||
|
// 快递筛选默认下标
|
||||||
|
index : 0,
|
||||||
|
},
|
||||||
|
expressNo : '',
|
||||||
|
courierName : '',
|
||||||
|
courierMobile : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
deliverFront(this.$Route.query.id).then(res=>{
|
||||||
|
this.state.array = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择发货方式
|
||||||
|
wayChange(e) {
|
||||||
|
this.send.sendIndex = e.detail.value
|
||||||
|
this.expressNo = ''
|
||||||
|
this.courierName = ''
|
||||||
|
this.courierMobile = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// 筛选
|
||||||
|
sexChange(e) {
|
||||||
|
this.state.index = e.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
// 物流单号
|
||||||
|
bindExpressNo(val) {
|
||||||
|
this.expressNo = val.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
// 送货人姓名
|
||||||
|
bindCourierName(val) {
|
||||||
|
this.courierName = val.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
// 送货人联系方式
|
||||||
|
bindCourierMobile(val) {
|
||||||
|
this.courierMobile = val.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
sendSubmit() {
|
||||||
|
deliverForm(this.$Route.query.id,{
|
||||||
|
type : this.send.sendWay[this.send.sendIndex].id || '',
|
||||||
|
express_id : this.state.array[this.state.index].id || '',
|
||||||
|
express_no : this.expressNo || '',
|
||||||
|
courier_name : this.courierName || '',
|
||||||
|
courier_mobile : this.courierMobile || ''
|
||||||
|
}).then(res=>{
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '发送成功'
|
||||||
|
})
|
||||||
|
this.$Router.back()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.nickname {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: $padding;
|
||||||
|
margin-bottom: $margin;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
.examineTitle {
|
||||||
|
width: 210rpx;
|
||||||
|
}
|
||||||
|
.remarks {
|
||||||
|
width: calc(100% - 210rpx);
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.toExamine {
|
||||||
|
position: absolute;
|
||||||
|
top: $padding;
|
||||||
|
right: $padding;
|
||||||
|
display: flex;
|
||||||
|
.toExamine-row {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit {
|
||||||
|
background: #e93340;
|
||||||
|
color: white;
|
||||||
|
border-color: #e93340;
|
||||||
|
margin: $margin*4 $margin 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
114
pages/store/examine.vue
Normal file
114
pages/store/examine.vue
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<form @submit="sendSubmit">
|
||||||
|
<view class="nickname">
|
||||||
|
<view class="examineTitle">
|
||||||
|
退换单操作
|
||||||
|
</view>
|
||||||
|
<view class="toExamine">
|
||||||
|
<picker mode="selector" :value="state.index" range-key="name" :range="state.array" @change="sexChange">
|
||||||
|
<view>{{state.array[state.index].name}}</view>
|
||||||
|
</picker>
|
||||||
|
<image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="nickname">
|
||||||
|
<view class="examineTitle">
|
||||||
|
退换单备注：
|
||||||
|
</view>
|
||||||
|
<textarea class="remarks" @blur="bindTextAreaBlur" auto-height placeholder="请填写备注" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<button class="submit" form-type="submit" type="default">提交</button>
|
||||||
|
</form>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { storeAudit } from '@/apis/interfaces/store'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
state : {
|
||||||
|
// 退货单-筛选
|
||||||
|
array : [{
|
||||||
|
id : 'agree',
|
||||||
|
name: '审核通过'
|
||||||
|
},{
|
||||||
|
id : 'refuse',
|
||||||
|
name: '审核驳回'
|
||||||
|
}],
|
||||||
|
|
||||||
|
// 退货单筛选默认下标
|
||||||
|
index : 0,
|
||||||
|
},
|
||||||
|
remarks : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
bindTextAreaBlur(val) {
|
||||||
|
this.remarks = val.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
// 筛选
|
||||||
|
sexChange(e) {
|
||||||
|
this.state.index = e.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
sendSubmit(){
|
||||||
|
let newState = this.state.array[this.state.index].id,
|
||||||
|
newRemark = this.remarks
|
||||||
|
storeAudit(this.$Route.query.id, {
|
||||||
|
state : newState,
|
||||||
|
remark: newRemark
|
||||||
|
}).then(res=>{
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '审核成功'
|
||||||
|
})
|
||||||
|
this.$Router.back()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.nickname {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: $padding;
|
||||||
|
margin-bottom: $margin;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
.examineTitle {
|
||||||
|
width: 210rpx;
|
||||||
|
}
|
||||||
|
.remarks {
|
||||||
|
width: calc(100% - 210rpx);
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.toExamine {
|
||||||
|
position: absolute;
|
||||||
|
top: $padding;
|
||||||
|
right: $padding;
|
||||||
|
display: flex;
|
||||||
|
.toExamine-row {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit {
|
||||||
|
background: #e93340;
|
||||||
|
color: white;
|
||||||
|
border-color: #e93340;
|
||||||
|
margin: $margin*4 $margin 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
296
pages/store/index.vue
Normal file
296
pages/store/index.vue
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content" v-if="!loding">
|
||||||
|
<block v-if="this.$store.state.token != ''">
|
||||||
|
<block v-if="!certification">
|
||||||
|
<!-- 企业认证 -->
|
||||||
|
<view class="statusBar">
|
||||||
|
<view class="statusBar-title">企业工具</view>
|
||||||
|
</view>
|
||||||
|
<view class="store-login">
|
||||||
|
<block v-if="appliesState.code === -1">
|
||||||
|
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||||||
|
<view class="sub-title">{{appliesState.message}}</view>
|
||||||
|
<button type="default" @click="onRightBtn">认证并开通</button>
|
||||||
|
</block>
|
||||||
|
<block v-else-if="appliesState.code === 2">
|
||||||
|
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||||||
|
<view class="title">认证失败</view>
|
||||||
|
<view class="sub-title">{{appliesState.message}}</view>
|
||||||
|
<button type="default" @click="$Router.push({name: 'Approve', params: {formType: 'put'}})">重新提交认证</button>
|
||||||
|
</block>
|
||||||
|
<block v-else-if="appliesState.code === 0">
|
||||||
|
<image class="icon" src="@/static/icons/audit-icon.png" mode="widthFix"></image>
|
||||||
|
<view class="sub-title">{{appliesState.message}}</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="statusBar">
|
||||||
|
<view class="statusBar-box">
|
||||||
|
<image class="logo" :src="company.logo" mode="aspectFill"></image>
|
||||||
|
<view class="company">
|
||||||
|
<view class="name">{{company.name}}<image @click="$Router.push({name: 'Basics'})" class="name-img" src="../../static/icons/store_icon_pen.png" mode="aspectFill"></image></view>
|
||||||
|
<view class="tool">
|
||||||
|
<view class="faith"><image class="faith-img" src="../../static/icons/store_icon_row.png" mode="aspectFill"></image>诚信{{company.faith}}</view>
|
||||||
|
<view class="btn"><image class="btn-img" src="../../static/icons/store_icon_icon.png" mode="aspectFill"></image>{{company.identity}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 老板 -->
|
||||||
|
<boss v-if="!employee" :word-data="workbench"/>
|
||||||
|
<!-- 员工 -->
|
||||||
|
<staff v-if="employee" :tool-list="toolList"/>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
<!-- 登录提示 -->
|
||||||
|
<block v-else>
|
||||||
|
<view class="statusBar">
|
||||||
|
<view class="statusBar-title">企业工具</view>
|
||||||
|
</view>
|
||||||
|
<view class="store-login">
|
||||||
|
<image class="icon" src="@/static/icons/login-icon.png" mode="widthFix"></image>
|
||||||
|
<view class="sub-title">一键开启您的易货之旅</view>
|
||||||
|
<button type="default" @click="login">登录</button>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { index } from '@/apis/interfaces/store'
|
||||||
|
import { isallow, appliesQuery } from '@/apis/interfaces/company'
|
||||||
|
import { employeesTool } from '@/apis/interfaces/employees'
|
||||||
|
import boss from '@/components/store-boss/store-boss'
|
||||||
|
import staff from '@/components/store-staff/store-staff'
|
||||||
|
import userAuth from '@/public/userAuth'
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
boss,
|
||||||
|
staff
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loding : true,
|
||||||
|
appliesState : {},
|
||||||
|
certification: false,
|
||||||
|
employee : false,
|
||||||
|
workbench : {},
|
||||||
|
company : {},
|
||||||
|
toolList : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
this.getIndex()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 首页数据
|
||||||
|
getIndex(){
|
||||||
|
if(this.$store.state.token == ''){
|
||||||
|
this.loding = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
index().then(res => {
|
||||||
|
this.certification = res.is_certification
|
||||||
|
if(!res.is_certification){
|
||||||
|
this.getAppliesQuery()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.company = {
|
||||||
|
logo : res.cover,
|
||||||
|
name : res.name,
|
||||||
|
identity: res.company_identity,
|
||||||
|
faith : res.integrity
|
||||||
|
}
|
||||||
|
this.workbench = {
|
||||||
|
identity: res.identity_time,
|
||||||
|
grade : res.identity_sign,
|
||||||
|
top : res.top,
|
||||||
|
middle : res.middle,
|
||||||
|
order : res.order
|
||||||
|
}
|
||||||
|
this.employee = res.is_employee
|
||||||
|
this.loding = false
|
||||||
|
|
||||||
|
// 若为员工身份-则调取员工管理信息
|
||||||
|
if(res.is_employee) {
|
||||||
|
employeesTool().then(res=>{
|
||||||
|
this.toolList = res.permission
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch(err =>{
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 查询企业认证状态
|
||||||
|
getAppliesQuery(){
|
||||||
|
appliesQuery().then(res=>{
|
||||||
|
this.appliesState = res
|
||||||
|
this.loding = false
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 登录
|
||||||
|
login(){
|
||||||
|
let auth = new userAuth()
|
||||||
|
auth.Login().then(res => {
|
||||||
|
if(res.auth) this.getIndex()
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 开通vip
|
||||||
|
onRightBtn(){
|
||||||
|
isallow().then(res =>{
|
||||||
|
this.$Router.push({name: 'Approve'})
|
||||||
|
}).catch(err =>{
|
||||||
|
uni.showModal({
|
||||||
|
title : '提示',
|
||||||
|
content : '暂未开通商家vip无法开通店铺工具',
|
||||||
|
confirmText : '立即开通',
|
||||||
|
success : res=> {
|
||||||
|
if(res.confirm){
|
||||||
|
this.$Router.push({name: 'Vip'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 登录提示
|
||||||
|
.store-login{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 9;
|
||||||
|
background: white;
|
||||||
|
text-align: center;
|
||||||
|
@extend .vertical;
|
||||||
|
button{
|
||||||
|
margin-top: $margin*3;
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
border-radius: $radius/2;
|
||||||
|
background: $text-price;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 288rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Bar
|
||||||
|
.statusBar{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 99;
|
||||||
|
background: $text-price;
|
||||||
|
@extend .ios-top;
|
||||||
|
.statusBar-box{
|
||||||
|
min-height: 90rpx;
|
||||||
|
position: relative;
|
||||||
|
padding: $padding $padding $padding ($padding + 88);
|
||||||
|
color: white;
|
||||||
|
.logo{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
width: 94rpx;
|
||||||
|
height: 94rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4rpx solid #ed8483;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 4rpx 15rpx rgba(109,1,0,.8);
|
||||||
|
}
|
||||||
|
.company{
|
||||||
|
width: calc(100% - 94rpx);
|
||||||
|
padding-left: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.name{
|
||||||
|
line-height: 40rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
font-size: $title-size;
|
||||||
|
.name-img {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin: 7rpx 0 0 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tool {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 13rpx;
|
||||||
|
.faith{
|
||||||
|
line-height: 40rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
@extend .nowrap;
|
||||||
|
font-size: 24rpx;
|
||||||
|
background-color: rgba(0,0,0,.15);
|
||||||
|
padding: 0 15rpx;
|
||||||
|
border-radius: 60rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
.faith-img {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
margin: 5rpx 4rpx 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
line-height: 40rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 0 15rpx 0 30rpx;
|
||||||
|
background-color: #913335;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 0 60rpx 60rpx 0;
|
||||||
|
position: relative;
|
||||||
|
text-transform: uppercase;
|
||||||
|
.btn-img {
|
||||||
|
position: absolute;
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
left: -20rpx;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.statusBar-title{
|
||||||
|
line-height: 88rpx;
|
||||||
|
min-height: 88rpx;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding-top: calc(var(--status-bar-height) + #{$padding * 2} + 65rpx);
|
||||||
|
padding-bottom: $padding;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
83
pages/store/journal.vue
Normal file
83
pages/store/journal.vue
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="logsBack">
|
||||||
|
<view class="logsList" v-for="(item ,index) in logArr" :key="index">
|
||||||
|
<view class="logsLabel">
|
||||||
|
<view class="logsLabel-name">操作来源：</view>
|
||||||
|
<view class="logsTips" :class="[item.isMy ? 'active' : '']">{{ item.isMy ? '个人' : '商家' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="logsLabel" v-if="item.title">
|
||||||
|
<view class="logsLabel-name">申请原因：</view>
|
||||||
|
<view class="logsLabel-text">{{ item.title }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="logsLabel" v-if="item.state_text">
|
||||||
|
<view class="logsLabel-name">申请状态：</view>
|
||||||
|
<view class="logsLabel-text">{{ item.state_text }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="logsLabel" v-if="item.remark">
|
||||||
|
<view class="logsLabel-name">补充描述：</view>
|
||||||
|
<view class="logsLabel-text">{{ item.remark }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="logsLabel">
|
||||||
|
<view class="logsLabel-name">退款时间：</view>
|
||||||
|
<view class="logsLabel-text">{{ item.created_at }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { orderJournal } from '@/apis/interfaces/store'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
logArr : '', //订单数组列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
orderJournal(this.$Route.query.id).then(res=>{
|
||||||
|
this.logArr = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.logsBack {
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: $padding;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
.logsList {
|
||||||
|
background: #fff;
|
||||||
|
padding: $padding;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: $margin;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.logsTips {
|
||||||
|
color: #e1293f;
|
||||||
|
&.active {
|
||||||
|
color: #e1293f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.logsLabel {
|
||||||
|
padding: $padding 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
.logsLabel-name {
|
||||||
|
margin-right: $margin;
|
||||||
|
width: 140rpx;
|
||||||
|
}
|
||||||
|
.logsLabel-text {
|
||||||
|
color: $text-gray;
|
||||||
|
width: calc(100% - 140rpx - #{$margin});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
161
pages/store/logistic.vue
Normal file
161
pages/store/logistic.vue
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 物流状态 start -->
|
||||||
|
<view class="state" v-if="logistic.length > 0">
|
||||||
|
<view class="take">
|
||||||
|
<view class="take-tips">
|
||||||
|
收
|
||||||
|
</view>
|
||||||
|
<view class="take-text">
|
||||||
|
收货地址：发接口返回绝对是放假客户端上看见发货数据库大黄蜂教科书的浩丰科技
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list">
|
||||||
|
<!-- v-for="(item, index) in logistic" :key="index" -->
|
||||||
|
<view class="list-label">
|
||||||
|
<view class="list-name">
|
||||||
|
<text>发货中</text> 2020-15-12
|
||||||
|
</view>
|
||||||
|
<view class="list-time">
|
||||||
|
华东师范邯郸市科技发货圣诞节客服
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pack-center" v-else>
|
||||||
|
<image src="../../static/icons/store_logistic.png" mode="aspectFill"></image>
|
||||||
|
<view>{{message}} </view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { deliverLogistic } from '@/apis/interfaces/store'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message : '',
|
||||||
|
logistic: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
deliverLogistic(this.$Route.query.id).then(res=>{
|
||||||
|
console.log(res)
|
||||||
|
}).catch(err => {
|
||||||
|
this.message = err.message
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 物流状态
|
||||||
|
.state {
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
margin-top: $margin;
|
||||||
|
padding: $padding;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
.take {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
left: $uni-img-size-sm / 3 + 2;
|
||||||
|
top: $margin;
|
||||||
|
background-color: $uni-text-color-grey;
|
||||||
|
width: 2rpx;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.take-tips {
|
||||||
|
background-color: #e53d4c;
|
||||||
|
width: $uni-img-size-sm;
|
||||||
|
height: $uni-img-size-sm;
|
||||||
|
border-radius: $uni-border-radius-circle;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
transform: scale(.9);
|
||||||
|
text-align: center;
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-left: -4rpx;
|
||||||
|
}
|
||||||
|
.take-text {
|
||||||
|
margin-left: $margin;
|
||||||
|
line-height: 40rpx;
|
||||||
|
margin-top: $margin - 10;
|
||||||
|
width: calc(100% - #{$uni-img-size-sm} + #{$margin});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
.list-label {
|
||||||
|
padding-left: $padding * 3;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
padding-top: $padding - 10;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
left: $uni-img-size-sm / 3 - 4;
|
||||||
|
top: $margin;
|
||||||
|
background-color: $uni-text-color-grey;
|
||||||
|
width: $uni-img-size-sm / 3;
|
||||||
|
height: $uni-img-size-sm / 3;
|
||||||
|
border-radius: $uni-border-radius-circle;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
left: $uni-img-size-sm / 3 + 2;
|
||||||
|
top: $margin;
|
||||||
|
background-color: $uni-text-color-grey;
|
||||||
|
width: 2rpx;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
color: #e53d4c;
|
||||||
|
}
|
||||||
|
&:last-child::before {
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
}
|
||||||
|
&:first-child::after {
|
||||||
|
background-color: #e53d4c;
|
||||||
|
}
|
||||||
|
.list-name {
|
||||||
|
margin-bottom: $margin - 10;
|
||||||
|
text {
|
||||||
|
font-weight: 600;
|
||||||
|
padding-right: $padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-time {
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
line-height: 34rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暂无订单
|
||||||
|
.pack-center {
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
padding-top: 50%;
|
||||||
|
image {
|
||||||
|
width: $uni-img-size-lg * 2;
|
||||||
|
height:$uni-img-size-lg * 2;
|
||||||
|
margin: 0 auto $margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
38
pages/store/orderDetails.vue
Normal file
38
pages/store/orderDetails.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 订单详情 -->
|
||||||
|
<store-order-details :info="info" :listType="newType" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { deliverDetails, orderDetails } from '@/apis/interfaces/store'
|
||||||
|
import storeOrderDet from '@/components/store-order-details/store-order-details'
|
||||||
|
export default {
|
||||||
|
comments:{
|
||||||
|
storeOrderDet
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
info : '',
|
||||||
|
newType : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.newType = this.$Route.query.type
|
||||||
|
if(this.$Route.query.type == 'deliver') {
|
||||||
|
deliverDetails(this.$Route.query.id).then(res=>{
|
||||||
|
this.info = res
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
orderDetails(this.$Route.query.id).then(res=>{
|
||||||
|
this.info = res
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
171
pages/store/return.vue
Normal file
171
pages/store/return.vue
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 订单分类 -->
|
||||||
|
<scroll-view class="nav" scroll-x="true" scroll-with-animation="true">
|
||||||
|
<view :class="['nav-item', selectNavId === item.id ? 'nav-item-selected':'']" v-for="(item,index) in navList" :key="index" @click="selectNav(item.id)">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<store-order v-if="returnInfo.length > 0" :list="returnInfo" />
|
||||||
|
|
||||||
|
<view v-else class="pack-center">
|
||||||
|
<image src="../../static/icons/order-null.png"></image>
|
||||||
|
<view>您还没有相关订单</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { storeReturn, storeSign, storeToken } from '@/apis/interfaces/store'
|
||||||
|
import storeOrder from '@/components/store-order/store-order'
|
||||||
|
export default {
|
||||||
|
comments:{
|
||||||
|
storeOrder
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
returnInfo : '' ,// 列表
|
||||||
|
navList : [{
|
||||||
|
name : '待审核',
|
||||||
|
id : 'apply'
|
||||||
|
},{
|
||||||
|
name : '待返货',
|
||||||
|
id : 'deliver'
|
||||||
|
},{
|
||||||
|
name : '待签收',
|
||||||
|
id : 'delivered'
|
||||||
|
},{
|
||||||
|
name : '已签收',
|
||||||
|
id : 'signed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : '待确认退货',
|
||||||
|
id : 'process'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : '完成退货',
|
||||||
|
id : 'completed'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectNavId : 'apply'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 获取退货单列表
|
||||||
|
this.returnData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 退货单列表
|
||||||
|
returnData(){
|
||||||
|
storeReturn(this.selectNavId).then(res=>{
|
||||||
|
this.returnInfo = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择订单
|
||||||
|
selectNav(id) {
|
||||||
|
if (this.selectNavId !== id) {
|
||||||
|
this.selectNavId = id
|
||||||
|
this.returnData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 签收订单
|
||||||
|
goSign(orderNo,index) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '是否签收此订单？',
|
||||||
|
success: res => {
|
||||||
|
if(res.confirm) {
|
||||||
|
storeSign(orderNo).then(() => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '签收成功'
|
||||||
|
})
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.returnData()
|
||||||
|
},3000)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认退货
|
||||||
|
goReToken(orderNo,index) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '是否确认退货此订单？',
|
||||||
|
success: res => {
|
||||||
|
if(res.confirm) {
|
||||||
|
storeToken(orderNo).then(() => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '退货成功'
|
||||||
|
})
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.returnData()
|
||||||
|
},3000)
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: err.message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 订单nav
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: $title-size*0.95;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666;
|
||||||
|
position: sticky;
|
||||||
|
top: 0rpx;
|
||||||
|
z-index: 1;
|
||||||
|
.nav-item {
|
||||||
|
display: inline-block;
|
||||||
|
border-bottom: solid 4rpx #fff;
|
||||||
|
padding: 30rpx 10rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.nav-item-selected {
|
||||||
|
border-bottom: solid 4rpx $main-color;
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暂无订单
|
||||||
|
.pack-center {
|
||||||
|
text-align: center;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
padding-top: 50%;
|
||||||
|
image {
|
||||||
|
width: $uni-img-size-lg * 2;
|
||||||
|
height:$uni-img-size-lg * 2;
|
||||||
|
border-radius: $uni-border-radius-circle;
|
||||||
|
margin-bottom: $margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
206
pages/store/visitors.vue
Normal file
206
pages/store/visitors.vue
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- tabs -->
|
||||||
|
<view class="tabs">
|
||||||
|
<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日访客</view>
|
||||||
|
<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月访客</view>
|
||||||
|
<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年访客</view>
|
||||||
|
</view>
|
||||||
|
<!-- 统计信息 -->
|
||||||
|
<view class="statistics">
|
||||||
|
<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
|
||||||
|
<view class="statistics-date">
|
||||||
|
{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
<view class="statistics-text">
|
||||||
|
<text>访客量 {{visitor.factor}} 人</text>
|
||||||
|
<text>累计访客量 {{visitor.all}} 人</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 数据列表 -->
|
||||||
|
<block v-if="orders.length > 0">
|
||||||
|
<view class="lists">
|
||||||
|
<view class="item" v-for="(item, index) in orders" :key="index">
|
||||||
|
<image class="cover" :src="item.avatar" mode="aspectFill"></image>
|
||||||
|
<view class="title">{{item.nickname || '-'}}</view>
|
||||||
|
<view class="sub-title">访问记录: {{item.content || '-'}}</view>
|
||||||
|
<view class="sub-title">手机号码: {{item.mobile || '-'}}</view>
|
||||||
|
<view class="sub-title">访问时间: {{item.date || '-'}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="list-null">
|
||||||
|
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
|
||||||
|
<view class="sub-title">暂无相关访客记录</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { visitors } from '@/apis/interfaces/store'
|
||||||
|
import getDate from '@/public/date'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabsIndex: 'day',
|
||||||
|
dateValue: '',
|
||||||
|
endDate : '',
|
||||||
|
visitor : {
|
||||||
|
factor: 0,
|
||||||
|
all: 0
|
||||||
|
},
|
||||||
|
orders : []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
getDate().then(res => {
|
||||||
|
this.dateValue = res
|
||||||
|
this.endDate = res
|
||||||
|
this.getLists()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// tabs筛选
|
||||||
|
onTbas(type){
|
||||||
|
getDate(type).then(res => {
|
||||||
|
this.tabsIndex = type
|
||||||
|
this.dateValue = res
|
||||||
|
this.getLists()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 日期筛选
|
||||||
|
pickerDate(e){
|
||||||
|
let dateValue = e.detail.value
|
||||||
|
this.dateValue = dateValue
|
||||||
|
this.getLists()
|
||||||
|
},
|
||||||
|
// 获取列表
|
||||||
|
getLists(){
|
||||||
|
visitors({
|
||||||
|
type: this.tabsIndex,
|
||||||
|
date: this.dateValue
|
||||||
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.visitor = res.total
|
||||||
|
this.orders = res.lists.data
|
||||||
|
this.pages = res.lists.page
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err,
|
||||||
|
icon : 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 空提示
|
||||||
|
.list-null{
|
||||||
|
width: 100vw;
|
||||||
|
height: 40vh;
|
||||||
|
background: white;
|
||||||
|
text-align: center;
|
||||||
|
@extend .vertical;
|
||||||
|
.sub-title{
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
@extend .nowrap;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 288rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// content
|
||||||
|
.content{
|
||||||
|
padding-top: 80rpx;
|
||||||
|
}
|
||||||
|
// tabs
|
||||||
|
.tabs{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
background: white;
|
||||||
|
justify-content: space-around;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $text-gray;
|
||||||
|
.item.show{
|
||||||
|
color: $text-price;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 统计信息
|
||||||
|
.statistics{
|
||||||
|
margin-top: $margin;
|
||||||
|
background-color: white;
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
padding: $padding;
|
||||||
|
.statistics-date{
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 60rpx;
|
||||||
|
.arrowdown{
|
||||||
|
margin-left: $margin/2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.statistics-text{
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: gray;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text{
|
||||||
|
margin-left: $margin;
|
||||||
|
&:first-child{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 客户列表
|
||||||
|
.lists{
|
||||||
|
padding: $padding/2 0;
|
||||||
|
background: white;
|
||||||
|
.item{
|
||||||
|
padding: ($padding/2) $padding ($padding/2) ($padding*2 + 68);
|
||||||
|
position: relative;
|
||||||
|
min-height: 68rpx;
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding*2 + 68;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
content: ' ';
|
||||||
|
border-bottom: solid 1rpx $border-color;
|
||||||
|
}
|
||||||
|
&:first-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.cover{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
top: $padding/2;
|
||||||
|
width: 68rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
position: relative;
|
||||||
|
line-height: 58rpx;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: $title-size-sm;
|
||||||
|
color: $text-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
517
pages/verification/history.vue
Normal file
517
pages/verification/history.vue
Normal file
@@ -0,0 +1,517 @@
|
|||||||
|
<template>
|
||||||
|
<view class="Record" v-if="loaded">
|
||||||
|
<view class="record-top">
|
||||||
|
<image src="/static/images/ver-bg.png" mode="widthFix" class="record-bg" />
|
||||||
|
<view class="record-top-nav">
|
||||||
|
<view :class="['record-top-item',type==='year'?'selectTopItem':'']" @click="selectType('year')">按年
|
||||||
|
</view>
|
||||||
|
<view :class="['record-top-item',type==='month'?'selectTopItem':'']" @click="selectType('month')">按月
|
||||||
|
</view>
|
||||||
|
<view :class="['record-top-item',type==='day'?'selectTopItem':'']" @click="selectType('day')">按日</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-mouth-year">
|
||||||
|
<view class="record-type-left">
|
||||||
|
<u-picker mode="time" v-model="show" :params="params" @confirm='confirm' title='筛选日期'
|
||||||
|
start-year='2021' :end-year='currentYear' />
|
||||||
|
<view @click="show = true">
|
||||||
|
{{date?date:'选择日期'}}
|
||||||
|
<uni-icons type="arrowdown" color="#fff" size="12" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-type-right">
|
||||||
|
<view :class="['pay_type_item',scantype==='goods'?'pay_type_item_select':'']"
|
||||||
|
@click="selectCoinType('goods')">权证</view>
|
||||||
|
<view :class="['pay_type_item',scantype==='coupons'?'pay_type_item_select':'']"
|
||||||
|
@click="selectCoinType('coupons')">优惠券</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-title">核销总数 ( 件 ) </view>
|
||||||
|
<view class="record-money"><span></span>{{account}}
|
||||||
|
<span></span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="boss" v-if="isBos">
|
||||||
|
<view class="boss-left">
|
||||||
|
<image src="/static/images/boss.png" mode="mode" class="boss-img">我是BOSS
|
||||||
|
</view>
|
||||||
|
<view class="boss-right" @click="shopShow = true">
|
||||||
|
<u-select v-model="shopShow" :list="ShopList" @confirm="shopConfirm" value-name='store_id'
|
||||||
|
label-name='name' />
|
||||||
|
门店：<u-icon name="arrow-down" color="#606266" label-color='#606266' margin-right='10' label-pos='left'
|
||||||
|
:label='store_id?store_name:"全部门店"' size="28" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 列表。。。 -->
|
||||||
|
<view class="lists" v-if="lists.length>0">
|
||||||
|
<view class="list-item" v-for="(item,index) in lists" :key='index'>
|
||||||
|
|
||||||
|
<view class="list-item-title">
|
||||||
|
<view class="left">
|
||||||
|
<view class="tags">{{scantype === 'goods'?'权证核销':'优惠券核销'}}</view>
|
||||||
|
<view class='title' v-if="scantype === 'goods'">{{item.goods_sku.goods_name}}</view>
|
||||||
|
<view class='title' v-else>{{item.coupon.title}}</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="right"> -->
|
||||||
|
<!-- <u-icon name="checkmark-circle-fill" size='50' color='#e93340' /> -->
|
||||||
|
<!-- </view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="list-item-content" v-if='scantype === "goods"'>
|
||||||
|
<image class="good-img" :src="item.goods_sku.cover" mode="aspectFill" />
|
||||||
|
<view class="list-item-right">
|
||||||
|
<view class="content-item">核销商品数量：X {{item.qty}} </view>
|
||||||
|
<view class="content-item">核销商品规格：{{item.goods_sku.unit || '通用规格'}}</view>
|
||||||
|
<view class="content-item">核销时间：{{item.used_at}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item-content" v-else>
|
||||||
|
<image class="good-img" v-if='item.source.type ==="goods"' :src="item.source.cover"
|
||||||
|
mode="aspectFill" />
|
||||||
|
<view class="list-item-right">
|
||||||
|
<view class="content-item" v-if='item.source.type ==="goods"'>兑换商品名称：{{item.source.name}}
|
||||||
|
</view>
|
||||||
|
<view class="content-item"> 优惠券规格：满 {{item.coupon.full}} 减 {{item.coupon.price}} </view>
|
||||||
|
<view class="content-item">优惠券类型：{{item.coupon.type.text}}</view>
|
||||||
|
<view class="content-item">核销时间：{{item.used_at}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="person">
|
||||||
|
<image class="avatar" :src="item.clerk.avatar" mode="aspectFill" />
|
||||||
|
{{item.clerk.nickname}}
|
||||||
|
<view class="shop-name">{{item.store.name}}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 无列表 -->
|
||||||
|
<no-list v-if="lists.length === 0 && scantype === 'goods'" name='no-in' txt="没有任何权证核销记录" />
|
||||||
|
<no-list v-if="lists.length === 0 && scantype === 'coupons'" name='no-out' txt="没有任何优惠券核销记录" />
|
||||||
|
|
||||||
|
<!-- <u-toast ref="uToast" /> -->
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
scanList
|
||||||
|
} from '@/apis/interfaces/scan';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lists: [],
|
||||||
|
has_more: true,
|
||||||
|
page: 1,
|
||||||
|
type: 'year', // 统计类型day日，month月，year年
|
||||||
|
scantype: 'goods', // goods 数权核销 coupons 优惠券核销
|
||||||
|
date: new Date().toISOString().slice(0, 4), // 日：Y-m-d，月Y-m，年Y
|
||||||
|
params: {
|
||||||
|
year: true,
|
||||||
|
month: true,
|
||||||
|
day: true
|
||||||
|
},
|
||||||
|
show: false, // 显示
|
||||||
|
currentDay: new Date().toISOString().slice(0, 10),
|
||||||
|
currentMonth: new Date().toISOString().slice(0, 7),
|
||||||
|
currentYear: new Date().toISOString().slice(0, 4),
|
||||||
|
account: '',
|
||||||
|
loaded: false,
|
||||||
|
shopShow: false,
|
||||||
|
ShopList: [],
|
||||||
|
store_name: '',
|
||||||
|
store_id: '',
|
||||||
|
isBos:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.has_more) {
|
||||||
|
this.page = this.page + 1
|
||||||
|
this.getList()
|
||||||
|
} else {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '吼吼吼~我是有底的~',
|
||||||
|
type: 'error',
|
||||||
|
icon: false,
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取列表
|
||||||
|
getList() {
|
||||||
|
let data = {
|
||||||
|
page: this.page,
|
||||||
|
date_type: this.type,
|
||||||
|
date: this.date,
|
||||||
|
store_id:this.store_id
|
||||||
|
}
|
||||||
|
let apiUrl = ''
|
||||||
|
if (this.scantype === 'goods') {
|
||||||
|
apiUrl = 'manages/warrants/logs'
|
||||||
|
} else {
|
||||||
|
apiUrl = 'coupons/verify/logs/coupons'
|
||||||
|
}
|
||||||
|
|
||||||
|
scanList(apiUrl, data).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.account = res.all
|
||||||
|
this.lists = this.lists.concat(res.lists.data)
|
||||||
|
this.has_more = res.lists.page.has_more
|
||||||
|
this.loaded = true
|
||||||
|
this.ShopList = [{name:'全部',store_id:''},...res.stores]
|
||||||
|
this.isBos = res.isBos
|
||||||
|
}).catch(err => {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.message,
|
||||||
|
type: 'error',
|
||||||
|
icon: false,
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
selectCoinType(type) {
|
||||||
|
if (this.scantype !== type) {
|
||||||
|
this.scantype = type
|
||||||
|
this.store_id = ''
|
||||||
|
this.reset()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
reset() {
|
||||||
|
this.page = 1
|
||||||
|
this.lists = []
|
||||||
|
this.has_more = true
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
// 选择 年 月 日 切换要重置数据
|
||||||
|
selectType(type) {
|
||||||
|
console.log(type, typeof type)
|
||||||
|
if (this.type !== type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'year':
|
||||||
|
this.type = type
|
||||||
|
this.params = {
|
||||||
|
year: true,
|
||||||
|
month: false,
|
||||||
|
day: false
|
||||||
|
}
|
||||||
|
this.date = this.currentYear
|
||||||
|
this.store_id = ''
|
||||||
|
this.reset()
|
||||||
|
break;
|
||||||
|
case 'month':
|
||||||
|
this.type = type
|
||||||
|
this.params = {
|
||||||
|
year: true,
|
||||||
|
month: true,
|
||||||
|
day: false
|
||||||
|
}
|
||||||
|
this.date = this.currentMonth
|
||||||
|
this.store_id = ''
|
||||||
|
this.reset()
|
||||||
|
break;
|
||||||
|
case 'day':
|
||||||
|
this.type = type
|
||||||
|
this.params = {
|
||||||
|
year: true,
|
||||||
|
month: false,
|
||||||
|
day: false
|
||||||
|
}
|
||||||
|
this.date = this.currentDay
|
||||||
|
this.store_id = ''
|
||||||
|
this.reset()
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击确认按钮年月日
|
||||||
|
confirm(e) {
|
||||||
|
let type = this.type
|
||||||
|
switch (type) {
|
||||||
|
case 'year':
|
||||||
|
this.date = e.year
|
||||||
|
this.reset()
|
||||||
|
break;
|
||||||
|
case 'month':
|
||||||
|
this.date = e.year + '-' + e.month
|
||||||
|
this.reset()
|
||||||
|
break;
|
||||||
|
case 'day':
|
||||||
|
this.date = e.year + '-' + e.month + '-' + e.day
|
||||||
|
this.reset()
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 筛选门店信息
|
||||||
|
shopConfirm(e) {
|
||||||
|
this.store_id = e[0].value
|
||||||
|
this.store_name = e[0].label
|
||||||
|
this.reset()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Record {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-top {
|
||||||
|
width: calc(100% - 60rpx);
|
||||||
|
height: 360rpx;
|
||||||
|
background-image: linear-gradient(to left, #076cff, #076cff);
|
||||||
|
box-shadow: 0 10rpx 20rpx 0rpx rgba($color: $main-color, $alpha: 0.4);
|
||||||
|
margin: 0 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
padding: 10rpx 50rpx 20rpx 50rpx;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.record-bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 230rpx;
|
||||||
|
bottom: 0;
|
||||||
|
right: 30rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-top-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.record-top-item {
|
||||||
|
margin: 40rpx 20rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectTopItem {
|
||||||
|
border-bottom: solid 4rpx #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-mouth-year {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30rpx;
|
||||||
|
|
||||||
|
.record-type-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
uni-icons {
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-type-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.pay_type_item {
|
||||||
|
margin: 0 10rpx;
|
||||||
|
padding: 2rpx 20rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
border: solid 1rpx rgba($color: #000000, $alpha: 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay_type_item_select {
|
||||||
|
border: solid 1rpx #f7f7f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-money {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 50rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.boss {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.boss-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boss-right {
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
u-icon {
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.boss-img {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 列表
|
||||||
|
.lists {
|
||||||
|
// box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #000, $alpha: 0.4);
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.list-item-title {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 520rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-left: 12rpx;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
border-radius: 20rpx 0 20rpx 0;
|
||||||
|
background-color: #076cff;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .right{
|
||||||
|
// padding: 20rpx 30rpx;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.list-item-content {
|
||||||
|
width: 100%;
|
||||||
|
color: #999;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
|
||||||
|
.good-img {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item-right {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.content-item {
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.person {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding: 20rpx 0 0 0;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-name {
|
||||||
|
background-color: #076cff;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 4rpx 20rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
409
pages/verification/index.vue
Normal file
409
pages/verification/index.vue
Normal file
@@ -0,0 +1,409 @@
|
|||||||
|
<template>
|
||||||
|
<view class="Verification">
|
||||||
|
<image class="top-img" src="/static/images/hexiao_bg.png" mode="widthFix" />
|
||||||
|
<view class="txt">
|
||||||
|
<view class="title">扫描券码和权证 一键核销</view>
|
||||||
|
<view class="des">降低核销门槛 <span class='dian'>·</span>低成本留存优质客户</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn">
|
||||||
|
<view class="goods" @click="scanCode('goods','get')"> 权证核销 </view>
|
||||||
|
<view class="coupons" @click="scanCode('coupons','get')"> 优惠券核销 </view>
|
||||||
|
</view>
|
||||||
|
<view class="history" @click="goHistory">核销记录</view>
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
|
||||||
|
<!-- 二维码展示动画效果 -->
|
||||||
|
<view class="showCode " v-if="showCode">
|
||||||
|
<view class="showCodeBg" @click="showCode = false"></view>
|
||||||
|
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
|
||||||
|
<view class="showCodeTitle"> {{scanType === 'goods'?'确认核销该权证':'确认核销该优惠券'}}</view>
|
||||||
|
<view class="goodsInfo" v-if="scanType === 'goods'">
|
||||||
|
<image class="left" :src="info.goods.cover" mode="widthFix" />
|
||||||
|
<view class="right">
|
||||||
|
<view class="title ellipsis-2">{{info.goods.goods_name}}</view>
|
||||||
|
<view class="number">核销数量: X {{info.qty}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="goodsInfo" v-else>
|
||||||
|
<view class="right">
|
||||||
|
<view class="title ellipsis-2">优惠券名称：‘ {{info.coupon.title}} ’</view>
|
||||||
|
<view class="number">
|
||||||
|
优惠券类型：{{info.coupon.type.text}}
|
||||||
|
<span style='padding-left: 20rpx;'>数量：1</span>
|
||||||
|
</view>
|
||||||
|
<view class="number">备注：{{info.coupon.remark}}</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="sureVer" @click="scanInfo(code,'post',)">确认核销</view>
|
||||||
|
<view class="showCodeDes">请谨慎核销,操作成功后无法撤回</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
scanInfo
|
||||||
|
} from '@/apis/interfaces/scan'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scanType: 'goods', // coupons 优惠券核销 goods 权证核销
|
||||||
|
showCode: false,
|
||||||
|
info: '', // 权证核销返回前置
|
||||||
|
code: '', // 扫码返回的code
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
uni.hideLoading()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
scanCode(e) {
|
||||||
|
console.log(e)
|
||||||
|
this.scanType = e
|
||||||
|
uni.scanCode({
|
||||||
|
success: (res) => {
|
||||||
|
console.log('条码类型：' + res.scanType);
|
||||||
|
console.log('条码内容：' + res.result);
|
||||||
|
// uni.showLoading({
|
||||||
|
// title: '核销请求中..'
|
||||||
|
// })
|
||||||
|
this.code = res.result
|
||||||
|
this.scanInfo(res.result, 'get')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 请求核销前置，优惠券前置和权证前置（get） post 是核销
|
||||||
|
scanInfo(token, method) {
|
||||||
|
console.log(token, this.scanType)
|
||||||
|
let apiUrl = ''
|
||||||
|
let data = {
|
||||||
|
code: token
|
||||||
|
}
|
||||||
|
if (this.scanType === 'goods') {
|
||||||
|
console.log('权证核销')
|
||||||
|
apiUrl = 'manages/warrants/verification'
|
||||||
|
} else {
|
||||||
|
console.log('优惠券核销！')
|
||||||
|
apiUrl = 'coupons/verify/coupon'
|
||||||
|
}
|
||||||
|
scanInfo(apiUrl, data, method).then(res => {
|
||||||
|
if (this.scanType === 'goods') {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (method === 'post') {
|
||||||
|
this.showCode = false
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '权证核销成功',
|
||||||
|
type: 'error',
|
||||||
|
icon: false,
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.showCode = true
|
||||||
|
this.info = res
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('优惠券核销 有商品跳转优惠券详情页面，没有商品直接弹出核销页面！')
|
||||||
|
console.log(res, 'res')
|
||||||
|
if (method === 'post') {
|
||||||
|
this.showCode = false
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '优惠券核销成功',
|
||||||
|
type: 'error',
|
||||||
|
icon: false,
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (res.goods.length > 0) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '温馨提示',
|
||||||
|
content: '该优惠券下绑定了商品，是否勾选相应商品',
|
||||||
|
success: (res1) => {
|
||||||
|
if (res1.confirm) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/property/coupon/canUseList?code=' +
|
||||||
|
this.code
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.showCode = true
|
||||||
|
this.info = res.info
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.showCode = true
|
||||||
|
this.info = res.info
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.message,
|
||||||
|
type: 'error',
|
||||||
|
icon: false,
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
this.showCode = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 核销记录
|
||||||
|
goHistory() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/verification/history'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.Verification {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.top-img {
|
||||||
|
margin-top: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txt {
|
||||||
|
padding-top: 120rpx;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 42rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.des {
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: rgba($color: #255a7c, $alpha: .4);
|
||||||
|
padding-top: 20rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.dian {
|
||||||
|
color: #039bfe;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 140rpx;
|
||||||
|
|
||||||
|
.goods,
|
||||||
|
.coupons {
|
||||||
|
width: 310rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: solid 1rpx #039bfe;
|
||||||
|
color: #039bfe;
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupons {
|
||||||
|
background-color: #039bfe;
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history {
|
||||||
|
text-align: center;
|
||||||
|
padding: $padding;
|
||||||
|
width: 100%;
|
||||||
|
color: #cacaca;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画效果
|
||||||
|
.showCode {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.showCodeBg {
|
||||||
|
background-color: rgba($color:#000, $alpha: 0.3);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showCodeContentSelect {
|
||||||
|
animation: sk-foldCubeAngle .6s linear both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showCodeContentSelectNo {
|
||||||
|
animation: sk-foldCubeAngleNo .6s linear both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showCodeContent {
|
||||||
|
padding: 50rpx 30rpx 30rpx 30rpx;
|
||||||
|
width: 640rpx;
|
||||||
|
min-height: 500rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 199;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showCodeTitle {
|
||||||
|
font-weight: bold;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
font-size: 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goodsInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: $margin;
|
||||||
|
|
||||||
|
// background-color:red;
|
||||||
|
.left {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
padding-top: 10rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sureVer {
|
||||||
|
background-color: #039bfe;
|
||||||
|
width: 500rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #fff;
|
||||||
|
margin: 30rpx 0;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showCodeDes {
|
||||||
|
padding: 20rpx 0 20rpx 0;
|
||||||
|
color: gray;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-foldCubeAngle {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||||
|
transform: perspective(140px) rotateX(-180deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||||
|
transform: perspective(140px) rotateX(0deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-foldCubeAngleNo {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes turn {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
opacity: .9;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
opacity: .9;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user