员工管理添加员工列表优惠券完善
This commit is contained in:
唐明明
@@ -26,13 +26,14 @@ const pushCoupons = (data) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 关联券产品
|
// 关联券产品
|
||||||
const couponsGoods = id => {
|
const couponsGoods = data => {
|
||||||
return request({
|
return request({
|
||||||
url: 'coupons/tools/coupons/' + id + '/goods'
|
url: 'coupons/tools/coupons/goods',
|
||||||
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置关联商品
|
// 设置关联商品*********已废弃
|
||||||
const couponsAddgoods = (id, data) => {
|
const couponsAddgoods = (id, data) => {
|
||||||
return request({
|
return request({
|
||||||
url: 'coupons/tools/coupons/' + id + '/addgoods',
|
url: 'coupons/tools/coupons/' + id + '/addgoods',
|
||||||
@@ -56,11 +57,19 @@ const magCouponsStatus = (id) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 设为推荐
|
||||||
|
const magCouponsRecommend = id => {
|
||||||
|
return request({
|
||||||
|
url: 'coupons/tools/coupons/' + id + '/recommend'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
toolsCoupons,
|
toolsCoupons,
|
||||||
pushCoupons,
|
pushCoupons,
|
||||||
couponsGoods,
|
couponsGoods,
|
||||||
couponsAddgoods,
|
couponsAddgoods,
|
||||||
magCouponsInfo,
|
magCouponsInfo,
|
||||||
magCouponsStatus
|
magCouponsStatus,
|
||||||
|
magCouponsRecommend
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<view class="boos">
|
<view class="boos">
|
||||||
<!-- 店铺交易数据 -->
|
<!-- 店铺交易数据 -->
|
||||||
<view class="statistical">
|
<view class="statistical">
|
||||||
<view class="item">
|
<!-- <view class="item">
|
||||||
<view class="number">{{wordData.top.barter_total || 0}}</view>
|
<view class="number">{{wordData.top.barter_total || 0}}</view>
|
||||||
<view class="text">总易货额</view>
|
<view class="text">总易货额</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="number">{{wordData.top.cash_in || 0}}</view>
|
<view class="number">{{wordData.top.cash_in || 0}}</view>
|
||||||
<view class="text">现金收入</view>
|
<view class="text">现金收入</view>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<!-- 店铺概况 -->
|
<!-- 店铺概况 -->
|
||||||
<view class="general">
|
<view class="general">
|
||||||
@@ -30,9 +30,9 @@
|
|||||||
<view class="number">{{wordData.middle.clinch || 0}}</view>
|
<view class="number">{{wordData.middle.clinch || 0}}</view>
|
||||||
<view class="text">成交客户</view>
|
<view class="text">成交客户</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="general-item" @click="$Router.push({name: 'Employees'})">
|
<view class="general-item">
|
||||||
<view class="number">{{wordData.middle.employees || 0}}</view>
|
<view class="number">{{wordData.top.barter_total || 0}}</view>
|
||||||
<view class="text">员工数量</view>
|
<view class="text">总交易额</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="general-item" @click="$Router.push({name: 'GoodsMag'})">
|
<view class="general-item" @click="$Router.push({name: 'GoodsMag'})">
|
||||||
<view class="number">{{wordData.middle.sale || 0}}</view>
|
<view class="number">{{wordData.middle.sale || 0}}</view>
|
||||||
@@ -40,16 +40,16 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="general-item">
|
<view class="general-item">
|
||||||
<view class="number">{{wordData.middle.hold || 0}}</view>
|
<view class="number">{{wordData.middle.hold || 0}}</view>
|
||||||
<view class="text">权证持有</view>
|
<view class="text">退货单处理</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="general-item">
|
<view class="general-item">
|
||||||
<view class="number">{{wordData.middle.transfer || 0}}</view>
|
<view class="number">{{wordData.middle.transfer || 0}}</view>
|
||||||
<view class="text">转让权证</view>
|
<view class="text">发货单处理</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 店铺订单管理 -->
|
<!-- 店铺订单管理 -->
|
||||||
<view class="tool-flex order">
|
<!-- <view class="tool-flex order">
|
||||||
<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'deliver'}})">
|
<view class="order-item" @click="$Router.push({name: 'Order', params: {type: 'deliver'}})">
|
||||||
<view class="number" v-if="wordData.order.not_shipped > 0">{{wordData.order.not_shipped}}</view>
|
<view class="number" v-if="wordData.order.not_shipped > 0">{{wordData.order.not_shipped}}</view>
|
||||||
<image class="icon" src="@/static/icons/order_icon_01.png" mode="aspectFill"></image>
|
<image class="icon" src="@/static/icons/order_icon_01.png" mode="aspectFill"></image>
|
||||||
@@ -75,7 +75,7 @@
|
|||||||
<image class="icon" src="@/static/icons/order_icon_04.png" mode="aspectFill"></image>
|
<image class="icon" src="@/static/icons/order_icon_04.png" mode="aspectFill"></image>
|
||||||
<view class="title">退换货</view>
|
<view class="title">退换货</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<!-- 店铺工具 -->
|
<!-- 店铺工具 -->
|
||||||
<view class="tool-flex store">
|
<view class="tool-flex store">
|
||||||
<view class="store-item" @click="$Router.push({name: 'Verification'})">
|
<view class="store-item" @click="$Router.push({name: 'Verification'})">
|
||||||
@@ -94,17 +94,10 @@
|
|||||||
<image class="icon" src="@/static/icons/tool_icon_03.png" mode="aspectFill"></image>
|
<image class="icon" src="@/static/icons/tool_icon_03.png" mode="aspectFill"></image>
|
||||||
<view class="title">收款管理</view>
|
<view class="title">收款管理</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<!-- 企业营销工具管理 -->
|
|
||||||
<view class="tool-flex store">
|
|
||||||
<view class="store-item" @click="$Router.push({name: 'Basics'})">
|
<view class="store-item" @click="$Router.push({name: 'Basics'})">
|
||||||
<image class="icon" src="@/static/icons/tool_icon_04.png" mode="aspectFill"></image>
|
<image class="icon" src="@/static/icons/tool_icon_04.png" mode="aspectFill"></image>
|
||||||
<view class="title">基础信息</view>
|
<view class="title">基础信息</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="store-item">
|
|
||||||
<image class="icon" src="@/static/icons/tool_icon_05.png" mode="aspectFill"></image>
|
|
||||||
<view class="title">智能名片</view>
|
|
||||||
</view>
|
|
||||||
<view class="store-item">
|
<view class="store-item">
|
||||||
<image class="icon" src="@/static/icons/tool_icon_06.png" mode="aspectFill"></image>
|
<image class="icon" src="@/static/icons/tool_icon_06.png" mode="aspectFill"></image>
|
||||||
<view class="title">营销推广码</view>
|
<view class="title">营销推广码</view>
|
||||||
@@ -118,10 +111,15 @@
|
|||||||
<view class="title">员工管理</view>
|
<view class="title">员工管理</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 企业数据统计 -->
|
||||||
|
<view class="tool-flex">
|
||||||
|
<l-f2 ref="chart"></l-f2>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2.min.js'
|
||||||
export default {
|
export default {
|
||||||
name:"store-boss",
|
name:"store-boss",
|
||||||
props:{
|
props:{
|
||||||
@@ -132,7 +130,17 @@
|
|||||||
return {
|
return {
|
||||||
top : {},
|
top : {},
|
||||||
middle : {},
|
middle : {},
|
||||||
order : {}
|
order : {},
|
||||||
|
data: [{
|
||||||
|
date: '2017-06-05',
|
||||||
|
value: 116
|
||||||
|
}, {
|
||||||
|
date: '2017-06-06',
|
||||||
|
value: 129
|
||||||
|
}, {
|
||||||
|
date: '2017-06-07',
|
||||||
|
value: 135
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -165,7 +173,7 @@
|
|||||||
}
|
}
|
||||||
// 店铺概况
|
// 店铺概况
|
||||||
.general{
|
.general{
|
||||||
margin: -$margin*4 $margin 0 $margin;
|
margin: -$margin*5 $margin 0 $margin;
|
||||||
.general-box{
|
.general-box{
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: $radius/2;
|
border-radius: $radius/2;
|
||||||
|
|||||||
@@ -104,15 +104,14 @@
|
|||||||
this.formType = this.$Route.query.formType
|
this.formType = this.$Route.query.formType
|
||||||
this.name = res.info.name
|
this.name = res.info.name
|
||||||
this.industryIndex = res.industries.findIndex(val => val.industry_id === res.info.industry.industry_id) || 0
|
this.industryIndex = res.industries.findIndex(val => val.industry_id === res.info.industry.industry_id) || 0
|
||||||
this.category = res.info.categories
|
|
||||||
if(this.formType === 'put'){
|
if(this.formType === 'put'){
|
||||||
appliesInfo().then(formValue => {
|
appliesInfo().then(formValue => {
|
||||||
console.log(formValue)
|
|
||||||
for(let val of formValue.categories){
|
for(let val of formValue.categories){
|
||||||
if(val.check){
|
if(val.check){
|
||||||
this.categorys.push(val.category_id)
|
this.categorys.push(val.category_id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.category = formValue.categories
|
||||||
this.corporate = formValue.certification.name
|
this.corporate = formValue.certification.name
|
||||||
this.identity = formValue.certification.idcard
|
this.identity = formValue.certification.idcard
|
||||||
this.org = formValue.certification.code
|
this.org = formValue.certification.code
|
||||||
@@ -124,6 +123,8 @@
|
|||||||
icon : 'none'
|
icon : 'none'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
}else{
|
||||||
|
this.category = res.info.categories
|
||||||
}
|
}
|
||||||
}).catch(err =>{
|
}).catch(err =>{
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
@@ -152,8 +153,8 @@
|
|||||||
let method = this.formType === 'put' ? 'PUT' : 'POST'
|
let method = this.formType === 'put' ? 'PUT' : 'POST'
|
||||||
applies({
|
applies({
|
||||||
name : this.name,
|
name : this.name,
|
||||||
cover : this.logo,
|
cover : this.logo.path,
|
||||||
license : this.license,
|
license : this.license.path,
|
||||||
user_name : this.corporate,
|
user_name : this.corporate,
|
||||||
id_card : this.identity,
|
id_card : this.identity,
|
||||||
code : this.org,
|
code : this.org,
|
||||||
|
|||||||
@@ -1,14 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="coupons-preview">
|
<view class="coupons-preview">
|
||||||
<view class="item cover" @click="updCover">
|
<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-if="cover != ''" :src="cover" mode="aspectFill" />
|
||||||
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
|
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
<view class="item mian">
|
<view class="item mian">
|
||||||
<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
|
<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
|
||||||
<view class="time nowrap">{{datePickerValue.length == 0 ? '优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
|
<block v-if="timeIndex == 0">
|
||||||
<view class="goods nowrap">全店通用</view>
|
<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>
|
</view>
|
||||||
<view class="add-info">
|
<view class="add-info">
|
||||||
@@ -19,18 +29,21 @@
|
|||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
<view class="inputs">
|
<view class="inputs">
|
||||||
<label class="input-label">券名称</label>
|
<label class="input-label">券标题</label>
|
||||||
<input type="text" v-model="couponsTitle" placeholder="输入优惠券名称" />
|
<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
|
||||||
</view>
|
</view>
|
||||||
<view class="inputs">
|
<view class="inputs">
|
||||||
<label class="input-label">发券数量</label>
|
<label class="input-label">发券数量</label>
|
||||||
<input type="number" v-model="quantity" placeholder="输入优惠券发放量" />
|
<view class="input-number">
|
||||||
|
<uni-number-box class="number" :min="1" :max="9999" :value="quantity" @change="quantityChange"></uni-number-box>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="inputs">
|
<view class="inputs">
|
||||||
<label class="input-label">每人限领</label>
|
<label class="input-label">每人限领</label>
|
||||||
<input type="number" v-model="personQuantity" placeholder="输入每人限领数, 0为不限制" />
|
<view class="input-number">
|
||||||
|
<uni-number-box class="number" :min="1" :max="quantity" :value="personQuantity" @change="personQuantityChange"></uni-number-box>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<block v-if="types[typeIndex].id == 2">
|
<block v-if="types[typeIndex].id == 2">
|
||||||
<view class="inputs">
|
<view class="inputs">
|
||||||
<label class="input-label">满</label>
|
<label class="input-label">满</label>
|
||||||
@@ -40,38 +53,47 @@
|
|||||||
<label class="input-label">减</label>
|
<label class="input-label">减</label>
|
||||||
<input type="digit" v-model="price" placeholder="输入券优惠金额" />
|
<input type="digit" v-model="price" placeholder="输入券优惠金额" />
|
||||||
</view>
|
</view>
|
||||||
</block>
|
|
||||||
<view class="inputs">
|
<view class="inputs">
|
||||||
<label class="input-label">使用渠道</label>
|
<label class="input-label">使用渠道</label>
|
||||||
<view class="input-checkbox">
|
<view class="input-checkbox">
|
||||||
<radio-group @change="radioChange">
|
<radio-group @change="radioChange">
|
||||||
<label class="input-checkbox-item">
|
<label class="input-checkbox-item">
|
||||||
<radio color="#c82626" value="1" checked/>
|
<radio color="#e93340" value="1" checked/>
|
||||||
<text>线上</text>
|
<text>线上优惠</text>
|
||||||
</label>
|
</label>
|
||||||
<label class="input-checkbox-item">
|
<label class="input-checkbox-item">
|
||||||
<radio color="#c82626" value="2"/>
|
<radio color="#e93340" value="2"/>
|
||||||
<text>线下</text>
|
<text>线下活动</text>
|
||||||
</label>
|
</label>
|
||||||
</radio-group>
|
</radio-group>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</block>
|
||||||
<view class="inputs">
|
<view class="inputs">
|
||||||
<label class="input-label">券有效期</label>
|
<label class="input-label">时间类型</label>
|
||||||
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
|
<picker :range="times" range-key="text" :value="timeIndex" data-type="timeIndex" @change="changePicker">
|
||||||
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#c82626" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
|
<view class="input-text">{{times[timeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||||
</view>
|
|
||||||
<view class="inputs">
|
|
||||||
<label class="input-label">设为推荐</label>
|
|
||||||
<picker :range="recommend" range-key="text" :value="recommendIndex" data-type="recommendIndex" @change="changePicker">
|
|
||||||
<view class="input-text">{{recommend[recommendIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
<view class="inputs">
|
<view class="inputs">
|
||||||
<label class="input-label">产品限制</label>
|
<label class="input-label">{{timeIndex == 0 ? '券有效期': '延期天数'}}</label>
|
||||||
<picker :range="product" range-key="text" :value="productIndex" data-type="productIndex" @change="changePicker">
|
<block v-if="timeIndex === 0">
|
||||||
<view class="input-text">{{product[productIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期区间': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||||
</picker>
|
<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>
|
</view>
|
||||||
<view class="add-textarea">
|
<view class="add-textarea">
|
||||||
@@ -79,7 +101,7 @@
|
|||||||
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
|
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
|
||||||
</view>
|
</view>
|
||||||
<view class="add-btn ios-bottom">
|
<view class="add-btn ios-bottom">
|
||||||
<button type="default" @click="updComponent">{{product[productIndex].type === 'all' ? '发布优惠券': '选择关联商品'}}</button>
|
<button type="default" @click="updComponent">发布优惠券</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -100,29 +122,41 @@
|
|||||||
{ id: 2, text: '代金券' },
|
{ id: 2, text: '代金券' },
|
||||||
{ id: 3, text: '提货券' },
|
{ id: 3, text: '提货券' },
|
||||||
],
|
],
|
||||||
recommendIndex : 0,
|
timeIndex : 0,
|
||||||
recommend : [
|
times : [
|
||||||
{ type: '0', text: '不推荐' },
|
{ type: 2, text: '固定时间（区间范围）' },
|
||||||
{ type: '1', text: '推荐' }
|
{ type: 1, text: '延期券（用户领取后有效天数）' }
|
||||||
],
|
],
|
||||||
productIndex : 0,
|
showDatePicker : false, // 活动弹出层时间
|
||||||
product : [
|
datePickerValue : [], // 活动时间
|
||||||
{ type: 'all', text: '全部商品通用' },
|
cover : '', // 优惠券图标
|
||||||
{ type: 'part', text: '部分商品可用' }
|
useWay : 1, // 使用途径
|
||||||
],
|
couponsTitle : '', // 优惠券标题
|
||||||
showDatePicker : false,
|
quantity : 1, // 发券数量
|
||||||
datePickerValue : [],
|
personQuantity : 1, // 每人限领
|
||||||
cover : '',
|
full : '', // 满足金额
|
||||||
useWay : 1,
|
price : '', // 减少金额
|
||||||
couponsTitle : '',
|
description : '', // 使用规则
|
||||||
quantity : '',
|
coupongoods : [], // 关联商品
|
||||||
personQuantity : '',
|
timeNumber : 1 // 延期券时间
|
||||||
full : '',
|
|
||||||
price : '',
|
|
||||||
description : ''
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onShow(){
|
||||||
|
this.coupongoods = this.$store.getters.getCoupongoods
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
// 发券数量
|
||||||
|
quantityChange(value){
|
||||||
|
this.quantity = value
|
||||||
|
},
|
||||||
|
// 每人限领
|
||||||
|
personQuantityChange(value){
|
||||||
|
this.personQuantity = value
|
||||||
|
},
|
||||||
|
// 延期券时间
|
||||||
|
timeNumberChange(value){
|
||||||
|
this.timeNumber = value
|
||||||
|
},
|
||||||
// 使用渠道
|
// 使用渠道
|
||||||
radioChange(e){
|
radioChange(e){
|
||||||
this.useWay = e.detail.value
|
this.useWay = e.detail.value
|
||||||
@@ -154,9 +188,12 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 选择关联商品
|
||||||
|
onSelectGoods(){
|
||||||
|
this.$Router.push({name: 'selectGoods', params: {type: this.types[this.typeIndex].id}})
|
||||||
|
},
|
||||||
// 发布优惠券
|
// 发布优惠券
|
||||||
updComponent(){
|
updComponent(){
|
||||||
let recommendVlue = this.recommend[this.recommendIndex].type === 1 ? 2 : ''
|
|
||||||
let valuss = {
|
let valuss = {
|
||||||
title : this.couponsTitle,
|
title : this.couponsTitle,
|
||||||
cover : this.cover,
|
cover : this.cover,
|
||||||
@@ -168,24 +205,21 @@
|
|||||||
person_quantity : this.personQuantity,
|
person_quantity : this.personQuantity,
|
||||||
start_at : this.datePickerValue[0],
|
start_at : this.datePickerValue[0],
|
||||||
end_at : this.datePickerValue[1],
|
end_at : this.datePickerValue[1],
|
||||||
channel : this.product[this.productIndex].type,
|
|
||||||
description : this.description,
|
description : this.description,
|
||||||
position : [1, recommendVlue]
|
time_type : this.times[this.typeIndex].type,
|
||||||
|
days : this.timeNumber,
|
||||||
|
goodsable_ids : this.coupongoods
|
||||||
}
|
}
|
||||||
|
|
||||||
pushCoupons(valuss).then(res => {
|
pushCoupons(valuss).then(res => {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title : '提示',
|
title : '提示',
|
||||||
content : res.message,
|
content : res,
|
||||||
confirmText : res.linkGoods ? '关联商品' : '确定',
|
showCancel : false,
|
||||||
confirmColor: '#c82626',
|
confirmText : '确定',
|
||||||
cancelText : '稍后',
|
confirmColor: '#e93340',
|
||||||
cancelColor : '#555555',
|
|
||||||
showCancel : res.linkGoods,
|
|
||||||
success : modalRes => {
|
success : modalRes => {
|
||||||
if(modalRes.confirm && res.linkGoods){
|
this.$store.commit('setCoupongoods', [])
|
||||||
this.$Router.replace({name: 'selectGoods', params:{couponId: res.coupon_id}})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$Router.back()
|
this.$Router.back()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -274,6 +308,11 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.input-number{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
.input-checkbox{
|
.input-checkbox{
|
||||||
min-height: 90rpx;
|
min-height: 90rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -292,6 +331,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.inputs{}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 发布预览
|
// 发布预览
|
||||||
@@ -321,6 +361,23 @@
|
|||||||
border:solid 1rpx $border-color;
|
border:solid 1rpx $border-color;
|
||||||
box-sizing: border-box;
|
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{
|
&::after,&::before{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
<view class="content" v-if="!isLoding">
|
<view class="content" v-if="!isLoding">
|
||||||
<view class="details">
|
<view class="details">
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="info">
|
<view class="info-item">
|
||||||
<image class="info-cover" :src="details.cover" mode="aspectFill"></image>
|
<view class="info-item-title">优惠券标题</view>
|
||||||
<view class="info-title">{{details.title}}</view>
|
<view class="info-item-text">{{details.title}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-item-title">优惠券类型</view>
|
<view class="info-item-title">优惠券类型</view>
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-item-title">上架状态</view>
|
<view class="info-item-title">上架状态</view>
|
||||||
<view class="info-item-text">{{details.status.text}}</view>
|
<view class="info-item-text">已{{details.status.text}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-item-title">使用渠道</view>
|
<view class="info-item-title">使用渠道</view>
|
||||||
@@ -34,6 +34,7 @@
|
|||||||
<view class="info-item-title">每人限领</view>
|
<view class="info-item-title">每人限领</view>
|
||||||
<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
|
<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
<block v-if="details.time_type.value === 1">
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-item-title">券有效期(起)</view>
|
<view class="info-item-title">券有效期(起)</view>
|
||||||
<view class="info-item-text">{{details.start_at}}</view>
|
<view class="info-item-text">{{details.start_at}}</view>
|
||||||
@@ -42,6 +43,13 @@
|
|||||||
<view class="info-item-title">券有效期(止)</view>
|
<view class="info-item-title">券有效期(止)</view>
|
||||||
<view class="info-item-text">{{details.end_at}}</view>
|
<view class="info-item-text">{{details.end_at}}</view>
|
||||||
</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">
|
||||||
<view class="info-item-title">创建时间</view>
|
<view class="info-item-title">创建时间</view>
|
||||||
<view class="info-item-text">{{details.created_at}}</view>
|
<view class="info-item-text">{{details.created_at}}</view>
|
||||||
@@ -49,7 +57,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="mian">
|
<view class="mian">
|
||||||
<block v-if="details.goods.length > 0">
|
<block v-if="details.goods.length > 0">
|
||||||
<view class="mian-title">适用权证</view>
|
<view class="mian-title">关联商品</view>
|
||||||
<view class="mian-goods">
|
<view class="mian-goods">
|
||||||
<view class="item" v-for="(item, index) in details.goods" :key="index">
|
<view class="item" v-for="(item, index) in details.goods" :key="index">
|
||||||
<view class="item-title nowrap">{{item.name}}</view>
|
<view class="item-title nowrap">{{item.name}}</view>
|
||||||
@@ -68,7 +76,7 @@
|
|||||||
<view class="footer">
|
<view class="footer">
|
||||||
<view class="footer-flex">
|
<view class="footer-flex">
|
||||||
<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
|
<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
|
||||||
<view class="item" @click="$Router.push({name: 'selectGoods', params: {couponId: details.coupon_id}})">关联商品</view>
|
<view class="item" @click="onCouponsRecommend">{{recommended ? '设为推荐': '已设为推荐'}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="ios-bottom"></view>
|
<view class="ios-bottom"></view>
|
||||||
</view>
|
</view>
|
||||||
@@ -76,18 +84,20 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { magCouponsInfo, magCouponsStatus } from '@/apis/interfaces/coupons'
|
import { magCouponsInfo, magCouponsStatus, magCouponsRecommend } from '@/apis/interfaces/coupons'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isLoding: true,
|
isLoding : true,
|
||||||
|
recommended : false,
|
||||||
details : {}
|
details : {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
magCouponsInfo(this.$Route.query.couponId).then(res => {
|
magCouponsInfo(this.$Route.query.couponId).then(res => {
|
||||||
this.isLoding = false
|
this.recommended = res.can.recommended
|
||||||
this.details = res
|
this.details = res
|
||||||
|
this.isLoding = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
@@ -105,6 +115,21 @@
|
|||||||
icon : 'none'
|
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'
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
|
<view class="header">
|
||||||
<view class="tabs">
|
<view class="tabs">
|
||||||
<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
|
<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 == '1'}" @click="onTabs('1')">服务券</view>
|
||||||
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
|
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
|
||||||
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
|
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
|
||||||
</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">
|
<block v-if="coupons.length > 0">
|
||||||
<view class="coupons">
|
<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="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 class="item cover">
|
||||||
<image class="cover-img" :src="item.cover" mode="aspectFill" />
|
<view v-if="item.type.value === 2">
|
||||||
|
<view class="cover-price">{{item.price || 0}}<text>元</text></view>
|
||||||
|
<view class="cover-subtitle">代金券</view>
|
||||||
</view>
|
</view>
|
||||||
|
<image v-else class="cover-img" :src="item.cover" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="item mian">
|
<view class="item mian">
|
||||||
<view class="title nowrap">{{item.title}}</view>
|
<view class="title nowrap">{{item.title}}</view>
|
||||||
<view class="time nowrap">{{item.start_at}}至{{item.end_at}}</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">
|
<view class="tags nowrap">
|
||||||
<text>{{item.status.text}}</text>
|
<text>已{{item.status.text}}</text>
|
||||||
<text>{{item.type.text}}</text>
|
<text>{{item.goods_count}}商品可用</text>
|
||||||
<text>{{item.channel.text}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="arrowright">
|
<view class="arrowright">
|
||||||
@@ -29,7 +45,6 @@
|
|||||||
</block>
|
</block>
|
||||||
<block v-else>
|
<block v-else>
|
||||||
<view class="list-null">
|
<view class="list-null">
|
||||||
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
|
||||||
<view class="sub-title">暂无相关优惠券</view>
|
<view class="sub-title">暂无相关优惠券</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
@@ -42,6 +57,7 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
listType: '',
|
listType: '',
|
||||||
|
tabsType: '',
|
||||||
coupons : [],
|
coupons : [],
|
||||||
pages : {}
|
pages : {}
|
||||||
};
|
};
|
||||||
@@ -56,11 +72,19 @@
|
|||||||
this.listType = value
|
this.listType = value
|
||||||
this.getCoupons()
|
this.getCoupons()
|
||||||
},
|
},
|
||||||
|
// 状态筛选
|
||||||
|
onTabsType(val){
|
||||||
|
if(this.tabsType === val) return
|
||||||
|
this.tabsType = val
|
||||||
|
this.getCoupons()
|
||||||
|
},
|
||||||
// 数据列表
|
// 数据列表
|
||||||
getCoupons(){
|
getCoupons(){
|
||||||
toolsCoupons({
|
toolsCoupons({
|
||||||
type: this.listType
|
type : this.listType,
|
||||||
|
status : this.tabsType
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
this.coupons = res.lists.data
|
this.coupons = res.lists.data
|
||||||
this.pages = res.lists.page
|
this.pages = res.lists.page
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
@@ -79,12 +103,13 @@
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// tabs
|
// tabs
|
||||||
.tabs{
|
.header{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
.tabs{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
background: white;
|
background: white;
|
||||||
@@ -100,13 +125,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 类型
|
||||||
|
.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{
|
.list-null{
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding-bottom: 20vh;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: white;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@extend .vertical;
|
@extend .vertical;
|
||||||
.sub-title{
|
.sub-title{
|
||||||
@@ -119,7 +163,7 @@
|
|||||||
}
|
}
|
||||||
// 订单管理
|
// 订单管理
|
||||||
.coupons{
|
.coupons{
|
||||||
padding-top: 90rpx;
|
padding-top: 180rpx;
|
||||||
@extend .ios-bottom;
|
@extend .ios-bottom;
|
||||||
.coupons-flex{
|
.coupons-flex{
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -155,6 +199,23 @@
|
|||||||
border:solid 1rpx $border-color;
|
border:solid 1rpx $border-color;
|
||||||
box-sizing: border-box;
|
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{
|
&::after,&::before{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
|
|||||||
@@ -44,8 +44,16 @@
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
couponsGoods(this.$Route.query.couponId).then(res => {
|
couponsGoods({
|
||||||
this.goods = res
|
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()
|
this.selectNumber()
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
@@ -88,23 +96,8 @@
|
|||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
couponsAddgoods(this.$Route.query.couponId, {
|
this.$store.commit('setCoupongoods', this.selectGoods)
|
||||||
goodsable_ids: this.selectGoods
|
this.$Router.back()
|
||||||
}).then(res => {
|
|
||||||
uni.showModal({
|
|
||||||
title : '提示',
|
|
||||||
content : res,
|
|
||||||
showCancel : false,
|
|
||||||
success : modalRes => {
|
|
||||||
if(modalRes.confirm) this.$Router.back()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}).catch(err => {
|
|
||||||
uni.showToast({
|
|
||||||
title: err.message,
|
|
||||||
icon : 'none'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
<view class="info-card">
|
<view class="info-card">
|
||||||
<view class="cover">
|
<view class="cover">
|
||||||
<view class="cover-add vertical" @click="updCover">
|
<view class="cover-add vertical" @click="updCover">
|
||||||
<block v-if="cover != ''">
|
<block v-if="cover.showpath != ''">
|
||||||
<image :src="cover" mode="aspectFill"></image>
|
<image :src="cover.showpath" mode="aspectFill"></image>
|
||||||
</block>
|
</block>
|
||||||
<block v-else>
|
<block v-else>
|
||||||
<image class="cover-default" src="@/static/icons/add-icon.png" mode="widthFix"></image>
|
<image class="cover-default" src="@/static/icons/add-icon.png" mode="widthFix"></image>
|
||||||
@@ -64,7 +64,10 @@
|
|||||||
permissions : [],
|
permissions : [],
|
||||||
permissionIds: [],
|
permissionIds: [],
|
||||||
sectionIndex : 0,
|
sectionIndex : 0,
|
||||||
cover : '',
|
cover : {
|
||||||
|
showpath : '',
|
||||||
|
path : ''
|
||||||
|
},
|
||||||
name : '',
|
name : '',
|
||||||
phone : '',
|
phone : '',
|
||||||
job : ''
|
job : ''
|
||||||
@@ -94,7 +97,10 @@
|
|||||||
uploads([{
|
uploads([{
|
||||||
uri : path.tempFilePaths[0]
|
uri : path.tempFilePaths[0]
|
||||||
}]).then(res => {
|
}]).then(res => {
|
||||||
this.cover = res.url[0]
|
this.cover = {
|
||||||
|
showpath: res.url[0],
|
||||||
|
path : res.path[0]
|
||||||
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: err.message,
|
title: err.message,
|
||||||
@@ -110,7 +116,7 @@
|
|||||||
name : this.name,
|
name : this.name,
|
||||||
mobileNo : this.phone,
|
mobileNo : this.phone,
|
||||||
job : this.job,
|
job : this.job,
|
||||||
cover : this.cover,
|
cover : this.cover.path,
|
||||||
position : 1,
|
position : 1,
|
||||||
order : 0,
|
order : 0,
|
||||||
store_id : this.section[this.sectionIndex].store_id,
|
store_id : this.section[this.sectionIndex].store_id,
|
||||||
@@ -119,6 +125,7 @@
|
|||||||
uni.showModal({
|
uni.showModal({
|
||||||
title : '提示',
|
title : '提示',
|
||||||
content : res,
|
content : res,
|
||||||
|
showCancel : false,
|
||||||
success : () => {
|
success : () => {
|
||||||
this.$Router.back()
|
this.$Router.back()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,40 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="ios-bottom">
|
<view class="ios-bottom">
|
||||||
<uni-collapse>
|
<uni-collapse>
|
||||||
<uni-collapse-item :show-animation="true" :open="true">
|
<block v-for="(listItem, listIndex) in lists" :key="listIndex">
|
||||||
|
<uni-collapse-item :show-animation="true" :open="listIndex === 0">
|
||||||
<template v-slot:title>
|
<template v-slot:title>
|
||||||
<view class="collapse-title">技术部</view>
|
<view class="collapse-title">{{listItem.name}}</view>
|
||||||
</template>
|
</template>
|
||||||
<view class="employees-item" v-for="(item, index) in 10" :key="index">
|
<view class="employees-item" v-for="(item, index) in listItem.data" :key="index">
|
||||||
<view class="cover">
|
<view class="cover">
|
||||||
<block v-if="index === 4">唐</block>
|
<block v-if="item.user.avatar === ''">{{item.name.slice(0,1)}}</block>
|
||||||
<block v-else>
|
<block v-else>
|
||||||
<image class="cover-img" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
|
<image class="cover-img" :src="item.user.avatar" mode="aspectFill"></image>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="nickname nowrap">唐明明</view>
|
<view class="nickname nowrap">{{item.name}}<text>{{item.job}}</text></view>
|
||||||
<view class="job nowrap">web前端开发</view>
|
<view class="job nowrap">
|
||||||
|
<text v-for="(permissionItem, permissionIndex) in item.permission" :key="permissionIndex">{{permissionItem}}</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-collapse-item>
|
</uni-collapse-item>
|
||||||
<uni-collapse-item :show-animation="true">
|
|
||||||
<template v-slot:title>
|
|
||||||
<view class="collapse-title">市场部</view>
|
|
||||||
</template>
|
|
||||||
<view class="employees-item" v-for="(item, index) in 5" :key="index">
|
|
||||||
<view class="cover">
|
|
||||||
<block v-if="index === 4">唐</block>
|
|
||||||
<block v-else>
|
|
||||||
<image class="cover-img" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
|
|
||||||
</block>
|
</block>
|
||||||
</view>
|
|
||||||
<view class="content">
|
|
||||||
<view class="nickname">唐明明</view>
|
|
||||||
<view class="job">web前端开发</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-collapse-item>
|
|
||||||
</uni-collapse>
|
</uni-collapse>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -43,11 +30,13 @@
|
|||||||
import { employees } from '@/apis/interfaces/employees'
|
import { employees } from '@/apis/interfaces/employees'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
lists: []
|
||||||
|
};
|
||||||
},
|
},
|
||||||
onShow(){
|
onShow(){
|
||||||
employees().then(res => {
|
employees().then(res => {
|
||||||
console.log(res)
|
this.lists = res
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onNavigationBarButtonTap() {
|
onNavigationBarButtonTap() {
|
||||||
@@ -60,6 +49,8 @@
|
|||||||
.collapse-title{
|
.collapse-title{
|
||||||
padding: 0 $padding;
|
padding: 0 $padding;
|
||||||
line-height: 90rpx;
|
line-height: 90rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: $title-size-lg;
|
||||||
}
|
}
|
||||||
.employees-item {
|
.employees-item {
|
||||||
background: white;
|
background: white;
|
||||||
@@ -101,13 +92,27 @@
|
|||||||
height: 78rpx;
|
height: 78rpx;
|
||||||
padding-left: 98rpx;
|
padding-left: 98rpx;
|
||||||
.nickname{
|
.nickname{
|
||||||
line-height: 48rpx;
|
line-height: 40rpx;
|
||||||
font-size: $title-size;
|
font-size: $title-size;
|
||||||
}
|
text{
|
||||||
.job{
|
|
||||||
line-height: 30rpx;
|
|
||||||
font-size: $title-size-sm;
|
font-size: $title-size-sm;
|
||||||
color: $text-gray-m;
|
color: $text-gray-m;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.job{
|
||||||
|
line-height: 38rpx;
|
||||||
|
text{
|
||||||
|
background-color: $border-color-lg;
|
||||||
|
color: $text-gray;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
|
margin-left: $margin/2;
|
||||||
|
display: inline-block;
|
||||||
|
&:first-child{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -124,8 +124,11 @@
|
|||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="title-text">全站推广人数排名</view>
|
<view class="title-text">全站推广人数排名</view>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view class="ranking-item">
|
||||||
推广人数排名
|
<view class="ranking-number">1</view>
|
||||||
|
<image class="ranking-cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
|
||||||
|
<view class="ranking-nickname nowrap">唐明明唐明明唐明明唐明明唐明明唐明明唐明明</view>
|
||||||
|
<view class="ranking-count">100人</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 排名信息 -->
|
<!-- 排名信息 -->
|
||||||
@@ -133,8 +136,11 @@
|
|||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="title-text">全站推广企业排名</view>
|
<view class="title-text">全站推广企业排名</view>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view class="ranking-item">
|
||||||
推广企业排名
|
<view class="ranking-number">1</view>
|
||||||
|
<image class="ranking-cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
|
||||||
|
<view class="ranking-nickname nowrap">唐明明唐明明唐明明唐明明唐明明唐明明唐明明</view>
|
||||||
|
<view class="ranking-count">100家</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 推广海报 -->
|
<!-- 推广海报 -->
|
||||||
@@ -412,4 +418,40 @@
|
|||||||
font-size: $title-size-sm;
|
font-size: $title-size-sm;
|
||||||
color: $text-gray-m;
|
color: $text-gray-m;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 排行榜
|
||||||
|
.ranking-item{
|
||||||
|
position: relative;
|
||||||
|
padding: ($padding - 10) $padding ($padding - 10) ($padding + 158);
|
||||||
|
display: flex;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 88rpx;
|
||||||
|
.ranking-cover{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding + 30;
|
||||||
|
height: 88rpx;
|
||||||
|
width: 88rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
.ranking-number{
|
||||||
|
position: absolute;
|
||||||
|
left: $padding;
|
||||||
|
width: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ranking-nickname{
|
||||||
|
width: calc(100% - 200rpx);
|
||||||
|
padding-right: 20rpx;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
.ranking-count{
|
||||||
|
width: 200rpx;
|
||||||
|
text-align: right;
|
||||||
|
color: $text-gray;
|
||||||
|
font-size: $title-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -13,7 +13,8 @@ Vue.use(Vuex)
|
|||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
token : uni.getStorageSync('token') || '',
|
token : uni.getStorageSync('token') || '',
|
||||||
spread: uni.getStorageSync('spread')
|
spread: uni.getStorageSync('spread'),
|
||||||
|
coupongoods: []
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
getToken: state => {
|
getToken: state => {
|
||||||
@@ -21,6 +22,9 @@ export default new Vuex.Store({
|
|||||||
},
|
},
|
||||||
getSpread: state => {
|
getSpread: state => {
|
||||||
return state.spread
|
return state.spread
|
||||||
|
},
|
||||||
|
getCoupongoods: state => {
|
||||||
|
return state.coupongoods
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
@@ -31,6 +35,9 @@ export default new Vuex.Store({
|
|||||||
setSpread(state, value) {
|
setSpread(state, value) {
|
||||||
state.spread = value
|
state.spread = value
|
||||||
uni.setStorageSync('spread', value)
|
uni.setStorageSync('spread', value)
|
||||||
|
},
|
||||||
|
setCoupongoods(state, value) {
|
||||||
|
state.coupongoods = value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
160
uni_modules/lime-f2/changelog.md
Normal file
160
uni_modules/lime-f2/changelog.md
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
## 0.5.4（2021-07-09）
|
||||||
|
- chore: 统一命名规范，无须主动引入组件
|
||||||
|
## [代码示例站点1](https://limeui.qcoon.cn/#/f2-example)
|
||||||
|
## [代码示例站点2](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.5.3（2021-06-14）
|
||||||
|
- fix: 修复 头条系小程序 2d 报 JSON.stringify 的问题
|
||||||
|
- fix: 修复 H5 动画不触发问题
|
||||||
|
- chore: F2 版本更新至 3.8.9
|
||||||
|
## 0.5.2（2021-05-19）
|
||||||
|
- fix: 修复 微信小程序 PC 不显示问题
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.5.1（2021-05-14）
|
||||||
|
- feat: props 增加 `isDisableScroll` ，触摸图表时是否禁止页面滚动
|
||||||
|
- feat: props 增加 `webviewStyles` ，webview 的样式, 仅nvue有效
|
||||||
|
## 0.5.0（2021-05-13）
|
||||||
|
- docs: 插件用到了css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装它
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.4.9（2021-05-12）
|
||||||
|
- fix: 修复 百度平台 多个图表时 只生效一个的bug
|
||||||
|
## 0.4.8（2021-05-10）
|
||||||
|
- feat: 增加 `destroy` 方法，用于销毁实例
|
||||||
|
- feat: 增加 `canvasToTempFilePath` 方法，用于生成图片
|
||||||
|
```js
|
||||||
|
this.$refs.chart.canvasToTempFilePath({success: res => {
|
||||||
|
console.log('tempFilePath:', res.tempFilePath)
|
||||||
|
}})
|
||||||
|
```
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
|
||||||
|
## 0.4.7（2021-05-10）
|
||||||
|
- chore: F2 版本更新至 3.8.7
|
||||||
|
## 0.4.6（2021-05-05）
|
||||||
|
- docs: nvue 使用文档更新
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.4.5.7（2021-04-30）
|
||||||
|
- chore: nvue 增强 支持 console.log 输出到控制台方便调试
|
||||||
|
- docs: nvue 使用文档更新，不再需要声明F2
|
||||||
|
## 0.4.5.6（2021-04-29）
|
||||||
|
- fix: nvue 修复打包后 函数字符串被压缩无效的问题
|
||||||
|
- 若发现打包依然无效可使用直接返回字符串
|
||||||
|
```js
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
return `
|
||||||
|
const chart = new F2.Chart(config);
|
||||||
|
chart.source(data);
|
||||||
|
chart
|
||||||
|
.interval()
|
||||||
|
.position('genre*sold')
|
||||||
|
.color('genre');
|
||||||
|
chart.render();
|
||||||
|
return chart;
|
||||||
|
`
|
||||||
|
},{data});
|
||||||
|
```
|
||||||
|
- chore: 新增支持词云能力，头条小程序需要1.78.0后
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.4.5.5（2021-04-25）
|
||||||
|
- fix: 修复新版谷歌浏览器(90.0.4430.85) 报 `transform ` 的问题
|
||||||
|
## 0.4.5.4（2021-04-23）
|
||||||
|
- fix: 修复支付宝小程序尺寸问题
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.4.5.3（2021-04-22）
|
||||||
|
- chore: 删除多余console.log
|
||||||
|
## 0.4.5.2（2021-04-21）
|
||||||
|
- chore: 修复字节颜色报错的问题。
|
||||||
|
## 0.4.5.1（2021-04-18）
|
||||||
|
- chore: 增加默认尺寸 **300 x 300** , 当父级没有尺寸时启用。
|
||||||
|
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||||
|
- 由于 F2 对绘制地图 不佳，故地图示例南海诸岛使用图片。
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.4.5（2021-04-16）
|
||||||
|
- fix: 修复 app-vue 字体固定问题
|
||||||
|
- fix: 修复 h5 app-vue 画多边形尺寸过大
|
||||||
|
- fix: 修复 初始化 func 问题
|
||||||
|
- docs: 增加 矩形式树图 示例
|
||||||
|
- 由于 F2 **云图** 依赖的 `@antv/data-set` 只支持H5创建Canvas，所以暂时只有 H5 支持。
|
||||||
|
## 0.4.4.1（2021-04-16）
|
||||||
|
- chore: 更改 `webview` 地址
|
||||||
|
## 0.4.4（2021-04-16）
|
||||||
|
- chore: `nvue` 增加 chart.$emit 事件，主要用于图表交互，接收动作事件数据。
|
||||||
|
```html
|
||||||
|
<l-f2 @change="onChange" />
|
||||||
|
```
|
||||||
|
```js
|
||||||
|
chart.tooltip({
|
||||||
|
onChange: (ev) => {
|
||||||
|
chart.$emit('change', ev)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
## [代码示例：http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.4.3.1（2021-04-14）
|
||||||
|
- docs: 更新官网上的代码示例！复制粘贴即用
|
||||||
|
## [代码示例 http://liangei.gitee.io/limeui/#/f2-example](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
## 0.4.3（2021-04-13）
|
||||||
|
- chore: 增加`onInit`的属性函数，直接向图表传递初始化函数
|
||||||
|
```html
|
||||||
|
<l-f2 :onInit="onInitChart" />
|
||||||
|
```
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data: ()=>({
|
||||||
|
onInitChart: config => {
|
||||||
|
const chart = new F2.Chart(config);
|
||||||
|
const data = [
|
||||||
|
{ value: 63.4, city: 'New York', date: '2011-10-01' },
|
||||||
|
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
|
||||||
|
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
|
||||||
|
{ value: 58, city: 'New York', date: '2011-10-02' },
|
||||||
|
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
|
||||||
|
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
|
||||||
|
{ value: 53.3, city: 'New York', date: '2011-10-03' },
|
||||||
|
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
|
||||||
|
{ value: 69.4, city: 'Austin', date: '2011-10-03' },
|
||||||
|
];
|
||||||
|
chart.source(data, {
|
||||||
|
date: {
|
||||||
|
range: [0, 1],
|
||||||
|
type: 'timeCat',
|
||||||
|
mask: 'MM-DD'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
max: 300,
|
||||||
|
tickCount: 4
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.area().position('date*value').color('city').adjust('stack');
|
||||||
|
chart.line().position('date*value').color('city').adjust('stack');
|
||||||
|
chart.render();
|
||||||
|
// 注意：需要把chart return 出来
|
||||||
|
return chart;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
## 0.4.2（2021-04-09）
|
||||||
|
- chore: `nvue` webview 改为网络地址
|
||||||
|
## 0.4.1（2021-04-09）
|
||||||
|
- chore: `redraw(callback)` 更名为 `reset(callback)`
|
||||||
|
- fix: 修复 `nvue` 某些情况下无法传递函数字符串
|
||||||
|
- feat: 增加 `nvue` 下使用 `insertCss` 给节点设置 style
|
||||||
|
## 0.4.0（2021-04-08）
|
||||||
|
- chore: antv F2 version 更新到 `3.8.6`
|
||||||
|
- feat: `f2-all`,`f2-simple`等文件，默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||||
|
- fix: 修复钉钉小程序measureText undefined的问题
|
||||||
|
- fix: 修复小程序因`hammer`引用报错
|
||||||
|
## 0.3.0（2021-04-06）
|
||||||
|
- feat: `redraw(callback)` 方法重绘
|
||||||
|
- feat: `clear()` 方法清空图表
|
||||||
|
- feat: `changeData(data)` 方法更新图表，需要传数据
|
||||||
|
- feat: `repaint()` 方法更新图表：`source` 数据源 更新后，在需要的时候调用
|
||||||
|
- feat: `source` 数据源 和 `is-auto-play` 开启自动更新，配置这两个参数只要 `source` 数据源更新，就会更新图表
|
||||||
|
## 0.2.2（2021-04-05）
|
||||||
|
- fix: 修复微信小程序缺少`Transform`报错问题
|
||||||
|
## 0.2.1（2021-04-04）
|
||||||
|
- chore: 考虑到不是所有人需要 `nvue`，所以 `webview` 改为网络路径 , 当然你也可以把html下载放置到项目根目录的`hybrid`文件夹下
|
||||||
|
## 0.2.0（2021-04-04）
|
||||||
|
- chore: 基于 `webview` 实现兼容 `nvue`
|
||||||
|
## 0.1.0（2021-04-02）
|
||||||
|
- chore: 第一次上传，基本全端兼容，使用方法与官网一致。
|
||||||
121
uni_modules/lime-f2/components/l-f2/canvas.js
Normal file
121
uni_modules/lime-f2/components/l-f2/canvas.js
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import {
|
||||||
|
pixelRatio,
|
||||||
|
sleep
|
||||||
|
} from './utils';
|
||||||
|
|
||||||
|
const UNI_CANVAS_CONTEXT_MAP = {
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
fillStyle: 'FillStyle',
|
||||||
|
fontSize: 'FontSize',
|
||||||
|
globalAlpha: 'GlobalAlpha',
|
||||||
|
opacity: 'GlobalAlpha',
|
||||||
|
lineCap: 'LineCap',
|
||||||
|
lineJoin: 'LineJoin',
|
||||||
|
lineWidth: 'LineWidth',
|
||||||
|
miterLimit: 'MiterLimit',
|
||||||
|
strokeStyle: 'StrokeStyle',
|
||||||
|
textAlign: 'TextAlign',
|
||||||
|
textBaseline: 'TextBaseline',
|
||||||
|
shadow: 'Shadow',
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO || H5 || APP-PLUS
|
||||||
|
font: 'FontSize',
|
||||||
|
// #endif
|
||||||
|
};
|
||||||
|
|
||||||
|
function strLen(str) {
|
||||||
|
let len = 0;
|
||||||
|
for (let i = 0; i < str.length; i++) {
|
||||||
|
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||||||
|
len++;
|
||||||
|
} else {
|
||||||
|
len += 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头条小程序目前仅支持 setFontSize
|
||||||
|
// f2 会将所有属性整合为 font 简写，从中提取 fontSize 支持
|
||||||
|
const fontSizeReg = /(\d*\.?\d*)px/;
|
||||||
|
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
||||||
|
export default (ctx) => {
|
||||||
|
// #ifdef H5 || APP-PLUS
|
||||||
|
ctx.uniTransform = ctx.transform
|
||||||
|
ctx.transform = (...agrs) => {
|
||||||
|
if (ctx.draw && agrs[6]) {
|
||||||
|
agrs[4] *= pixelRatio
|
||||||
|
agrs[5] *= pixelRatio
|
||||||
|
}
|
||||||
|
if (agrs.length > 6) {
|
||||||
|
agrs.pop()
|
||||||
|
}
|
||||||
|
ctx.uniTransform(...agrs)
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
ctx.canvasGetImageData = ctx.getImageData
|
||||||
|
ctx.getImageData = null
|
||||||
|
// #endif
|
||||||
|
if (!ctx.getImageData) {
|
||||||
|
ctx.getImageData = (...agrs) => {
|
||||||
|
const [x, y, width, height] = agrs
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const parms = {
|
||||||
|
canvasId: ctx.id || ctx.canvasId,
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
success: res => {
|
||||||
|
resolve(res.data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||||
|
uni.canvasGetImageData(parms)
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
||||||
|
ctx.canvasGetImageData(parms)
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
|
||||||
|
if (!ctx.measureText) {
|
||||||
|
ctx.measureText = text => {
|
||||||
|
let fontSize = 12;
|
||||||
|
const font = ctx.__font;
|
||||||
|
if (font) {
|
||||||
|
fontSize = parseInt(font.split(' ')[3], 10);
|
||||||
|
}
|
||||||
|
fontSize /= 2;
|
||||||
|
return {
|
||||||
|
width: strLen(text) * fontSize
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Object.keys(UNI_CANVAS_CONTEXT_MAP).forEach(key => {
|
||||||
|
Object.defineProperty(ctx, key, {
|
||||||
|
set(val) {
|
||||||
|
const name = `set${UNI_CANVAS_CONTEXT_MAP[key]}`;
|
||||||
|
if (!ctx[name]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (key === 'font' && fontSizeReg.test(val)) {
|
||||||
|
const match = fontSizeReg.exec(val);
|
||||||
|
ctx[name](match[1]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (key === 'shadow' && Array.isArray(val)) {
|
||||||
|
ctx[name](...val);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(colorReg.test(val)) {
|
||||||
|
val = val.replace(colorReg, '#$1$1$2$2$3$3')
|
||||||
|
}
|
||||||
|
ctx[name](val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return ctx
|
||||||
|
}
|
||||||
15
uni_modules/lime-f2/components/l-f2/f2.min.js
vendored
Normal file
15
uni_modules/lime-f2/components/l-f2/f2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
446
uni_modules/lime-f2/components/l-f2/l-f2.vue
Normal file
446
uni_modules/lime-f2/components/l-f2/l-f2.vue
Normal file
@@ -0,0 +1,446 @@
|
|||||||
|
<template>
|
||||||
|
<view class="l-f2" :style="customStyle" v-if="canvasId">
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<cover-view class="l-f2__mask" v-if="isMask"></cover-view>
|
||||||
|
<canvas
|
||||||
|
class="l-f2__canvas"
|
||||||
|
v-if="use2dCanvas"
|
||||||
|
type="2d"
|
||||||
|
:id="canvasId"
|
||||||
|
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||||
|
:disable-scroll="isDisableScroll"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
|
@touchend="touchEnd"
|
||||||
|
/>
|
||||||
|
<canvas
|
||||||
|
class="l-f2__canvas"
|
||||||
|
v-else
|
||||||
|
:width="nodeWidth"
|
||||||
|
:height="nodeHeight"
|
||||||
|
:style="'width:' + width + 'px;height:' + height + 'px'"
|
||||||
|
:canvas-id="canvasId"
|
||||||
|
:id="canvasId"
|
||||||
|
:disable-scroll="isDisableScroll"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
|
@touchend="touchEnd"
|
||||||
|
/>
|
||||||
|
<view v-if="isCloud" style="width:2048px; height:2048px; position: fixed; left: 9999px;">
|
||||||
|
<canvas v-if="use2dCanvas" type="2d" :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||||
|
<canvas v-else :canvas-id="canvasId + '_cloud'" :id="canvasId + '_cloud'" class="l-f2__canvas"></canvas>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<web-view
|
||||||
|
class="l-f2__canvas"
|
||||||
|
:id="canvasId"
|
||||||
|
ref="webview"
|
||||||
|
:webviewStyles="webviewStyles"
|
||||||
|
src="http://liangei.gitee.io/limeui/hybrid/html/lime-ui/lime-f2/index.html?v=0.4.8"
|
||||||
|
@pagefinish="isFinish = true"
|
||||||
|
@onPostMessage="onMessage"
|
||||||
|
></web-view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
import extendContext from './canvas';
|
||||||
|
import { compareVersion, wrapEvent, pixelRatio } from './utils';
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
import { base64ToPath } from './utils';
|
||||||
|
// #endif
|
||||||
|
export default {
|
||||||
|
// version: '0.5.1'
|
||||||
|
name: 'lime-f2',
|
||||||
|
props: {
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: '2d'
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
webviewStyles: Object,
|
||||||
|
params: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
customStyle: String,
|
||||||
|
imageMask: String,
|
||||||
|
source: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
isAutoPlay: Boolean,
|
||||||
|
isDisableScroll: Boolean,
|
||||||
|
isCloud: Boolean,
|
||||||
|
onInit: {
|
||||||
|
type: [Function, Object],
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||||
|
use2dCanvas: true,
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN || MP-TOUTIAO
|
||||||
|
use2dCanvas: false,
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
width: null,
|
||||||
|
height: null,
|
||||||
|
nodeWidth: null,
|
||||||
|
nodeHeight: null,
|
||||||
|
isMask: false,
|
||||||
|
isInited: false,
|
||||||
|
imageData: null,
|
||||||
|
// config: {},
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
isFinish: false,
|
||||||
|
file: ''
|
||||||
|
// #endif
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
canvasId() {
|
||||||
|
return `l-f2${this._uid}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isAutoPlay(val) {
|
||||||
|
if (val) {
|
||||||
|
this.changeData(this.source);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
source: {
|
||||||
|
handler: function(data) {
|
||||||
|
if (this.isAutoPlay) {
|
||||||
|
this.changeData(data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.clear();
|
||||||
|
this.destroy();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.config = {}
|
||||||
|
this.isMask = this.isCloud && this.imageMask;
|
||||||
|
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||||
|
const { SDKVersion, version, platform, environment } = uni.getSystemInfoSync();
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0 && !((/ios/i.test(platform) && /7.0.20/.test(version)) || /wxwork/i.test(environment)) && !/windows/i.test(platform);;
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '1.78.0') >= 0;
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
async mounted() {
|
||||||
|
if (this.onInit) {
|
||||||
|
this.init(this.onInit);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
onMessage(e) {
|
||||||
|
const res = e?.detail?.data[0] || null;
|
||||||
|
if (res?.event) {
|
||||||
|
this.$emit(res.event, JSON.parse(res.data));
|
||||||
|
} else if (res?.file) {
|
||||||
|
this.file = res.data;
|
||||||
|
} else {
|
||||||
|
console.error(res);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
async init(func, params = null) {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$watch(
|
||||||
|
'isFinish',
|
||||||
|
(n, o) => {
|
||||||
|
(n || o) && (params || this.params) && this.$refs.webview.evalJs(`init(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||||
|
this.isInited = true;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
let config = await this.getContext(this.canvasId);
|
||||||
|
if (this.isCloud) {
|
||||||
|
let imageMask = null;
|
||||||
|
if (this.imageMask) {
|
||||||
|
this.isMask = true;
|
||||||
|
imageMask = await this.getImageMask(config);
|
||||||
|
this.imageData = imageMask;
|
||||||
|
this.isMask = false;
|
||||||
|
}
|
||||||
|
let cloud = await this.getContext(this.canvasId + '_cloud');
|
||||||
|
config = Object.assign({}, config, { cloud, imageMask });
|
||||||
|
}
|
||||||
|
const chart = await func(config);
|
||||||
|
if (chart) {
|
||||||
|
this.chart = chart;
|
||||||
|
this.canvasEl = chart.get('el');
|
||||||
|
this.isInited = true;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
changeData(data) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.changeData(data || this.source);
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$refs.webview.evalJs(`changeData(${JSON.stringify(data || this.source)})`);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
clear() {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.clear();
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$refs.webview.evalJs(`clear()`);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.destroy();
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$refs.webview.evalJs(`destroy()`);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
repaint() {
|
||||||
|
this.changeData(this.source);
|
||||||
|
},
|
||||||
|
reset(func, params = null) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.$watch(
|
||||||
|
'isInited',
|
||||||
|
v => v && func(this.chart),
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$refs.webview.evalJs(`reset(${JSON.stringify(func.toString())}, ${JSON.stringify(params || this.params)})`);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
canvasToTempFilePath(args = {}) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
const { use2dCanvas, canvasId, config } = this;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const copyArgs = Object.assign(
|
||||||
|
{
|
||||||
|
canvasId,
|
||||||
|
success: resolve,
|
||||||
|
fail: reject
|
||||||
|
},
|
||||||
|
args
|
||||||
|
);
|
||||||
|
if (use2dCanvas) {
|
||||||
|
let { canvas } = config[canvasId];
|
||||||
|
delete copyArgs.canvasId;
|
||||||
|
copyArgs.canvas = canvas;
|
||||||
|
}
|
||||||
|
uni.canvasToTempFilePath(copyArgs, this);
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.file = '';
|
||||||
|
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.$watch('file', async file => {
|
||||||
|
if (file) {
|
||||||
|
const tempFilePath = await base64ToPath(file);
|
||||||
|
resolve(args.success({ tempFilePath }));
|
||||||
|
} else {
|
||||||
|
reject(args.fail({ error: `` }));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
getImageMask(config) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
uni.getImageInfo({
|
||||||
|
src: this.imageMask,
|
||||||
|
success: async res => {
|
||||||
|
if (res.path) {
|
||||||
|
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
|
||||||
|
const localReg = /^\.|^\/(?=[^\/])/;
|
||||||
|
res.path = localReg.test(this.imageMask) ? `/${res.path}` : res.path;
|
||||||
|
// #endif
|
||||||
|
const { context, width, height, canvas } = config;
|
||||||
|
if (this.use2dCanvas) {
|
||||||
|
const imageMask = () => {
|
||||||
|
const imageMask = canvas.createImage();
|
||||||
|
imageMask.crossOrigin = '';
|
||||||
|
imageMask.src = res.path;
|
||||||
|
imageMask.onload = async () => {
|
||||||
|
context.drawImage(imageMask, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||||
|
const imageData = context.getImageData(0, 0, width, height).data;
|
||||||
|
context.clearRect(0, 0, width, height);
|
||||||
|
resolve(imageData);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
imageMask();
|
||||||
|
} else {
|
||||||
|
// #ifndef MP-BAIDU
|
||||||
|
context.drawImage(res.path, 0, 0, res.width, res.height, 0, 0, width, height);
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-BAIDU
|
||||||
|
context.drawImage(res.path, 0, 0, width, height, 0, 0, res.width, res.height);
|
||||||
|
// #endif
|
||||||
|
await this.canvasDraw(context);
|
||||||
|
const imageData = await context.getImageData(0, 0, width, height);
|
||||||
|
context.clearRect(0, 0, width, height);
|
||||||
|
await this.canvasDraw(context);
|
||||||
|
resolve(imageData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.error(JSON.stringify(err));
|
||||||
|
resolve(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
canvasDraw(ctx) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
ctx.draw(false, () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(true);
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getContext(canvasId) {
|
||||||
|
const { use2dCanvas, type = '2d', config } = this;
|
||||||
|
if (config[canvasId]?.context) {
|
||||||
|
return Promise.resolve(config[canvasId]);
|
||||||
|
}
|
||||||
|
if (use2dCanvas) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.in(this)
|
||||||
|
.select(`#${canvasId}`)
|
||||||
|
.fields({
|
||||||
|
node: true,
|
||||||
|
size: true
|
||||||
|
})
|
||||||
|
.exec(res => {
|
||||||
|
let { node, width, height } = res[0];
|
||||||
|
width = width || 300;
|
||||||
|
height = height || 300;
|
||||||
|
const context = node.getContext(type);
|
||||||
|
if (!canvasId.includes('_cloud')) {
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
}
|
||||||
|
node.width = width * pixelRatio;
|
||||||
|
node.height = height * pixelRatio;
|
||||||
|
this.config[canvasId] = { context, width, height, pixelRatio, canvas: node };
|
||||||
|
resolve(this.config[canvasId]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return new Promise(resolve => {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.in(this)
|
||||||
|
.select(`#${canvasId}`)
|
||||||
|
.boundingClientRect()
|
||||||
|
.exec(res => {
|
||||||
|
if (res) {
|
||||||
|
let { width, height } = res[0];
|
||||||
|
width = width || 300;
|
||||||
|
height = height || 300;
|
||||||
|
const context = uni.createCanvasContext(canvasId, this);
|
||||||
|
if (!canvasId.includes('_cloud')) {
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
this.nodeWidth = width * pixelRatio;
|
||||||
|
this.nodeHeight = height * pixelRatio;
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
this.config[canvasId] = {
|
||||||
|
context: extendContext(context),
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
// #ifdef H5 || APP-PLUS
|
||||||
|
pixelRatio: 1,
|
||||||
|
oPixelRatio: pixelRatio,
|
||||||
|
// #endif
|
||||||
|
// #ifndef H5
|
||||||
|
pixelRatio
|
||||||
|
// #endif
|
||||||
|
};
|
||||||
|
resolve(this.config[canvasId]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
touchStart(e) {
|
||||||
|
if (this.canvasEl) {
|
||||||
|
this.canvasEl.dispatchEvent('touchstart', wrapEvent(e));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchMove(e) {
|
||||||
|
if (this.canvasEl) {
|
||||||
|
this.canvasEl.dispatchEvent('touchmove', wrapEvent(e));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchEnd(e) {
|
||||||
|
if (this.canvasEl) {
|
||||||
|
this.canvasEl.dispatchEvent('touchend', wrapEvent(e));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="stylus">
|
||||||
|
full()
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
flex 1
|
||||||
|
// #endif
|
||||||
|
.l-f2
|
||||||
|
full()
|
||||||
|
position relative
|
||||||
|
&__mask
|
||||||
|
position absolute
|
||||||
|
left 0
|
||||||
|
right 0
|
||||||
|
bottom 0
|
||||||
|
top 0
|
||||||
|
background-color #fff
|
||||||
|
z-index 1
|
||||||
|
&__canvas
|
||||||
|
full()
|
||||||
|
</style>
|
||||||
65
uni_modules/lime-f2/components/l-f2/utils.js
Normal file
65
uni_modules/lime-f2/components/l-f2/utils.js
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
// #ifndef APP-NVUE
|
||||||
|
// 计算版本
|
||||||
|
export function compareVersion(v1, v2) {
|
||||||
|
v1 = v1.split('.')
|
||||||
|
v2 = v2.split('.')
|
||||||
|
const len = Math.max(v1.length, v2.length)
|
||||||
|
while (v1.length < len) {
|
||||||
|
v1.push('0')
|
||||||
|
}
|
||||||
|
while (v2.length < len) {
|
||||||
|
v2.push('0')
|
||||||
|
}
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
const num1 = parseInt(v1[i], 10)
|
||||||
|
const num2 = parseInt(v2[i], 10)
|
||||||
|
|
||||||
|
if (num1 > num2) {
|
||||||
|
return 1
|
||||||
|
} else if (num1 < num2) {
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export function wrapEvent(e) {
|
||||||
|
if (!e) return;
|
||||||
|
if (!e.preventDefault) {
|
||||||
|
e.preventDefault = function() {};
|
||||||
|
}
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const pixelRatio = uni.getSystemInfoSync().pixelRatio
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
export function base64ToPath(base64) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||||
|
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
|
||||||
|
bitmap.loadBase64Data(base64, () => {
|
||||||
|
if (!format) {
|
||||||
|
reject(new Error('ERROR_BASE64SRC_PARSE'))
|
||||||
|
}
|
||||||
|
const time = new Date().getTime();
|
||||||
|
const filePath = `_doc/uniapp_temp/${time}.${format}`
|
||||||
|
|
||||||
|
bitmap.save(filePath, {},
|
||||||
|
() => {
|
||||||
|
bitmap.clear()
|
||||||
|
resolve(filePath)
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
bitmap.clear()
|
||||||
|
console.error(`${JSON.stringify(error)}`)
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
}, (error) => {
|
||||||
|
bitmap.clear()
|
||||||
|
console.error(`${JSON.stringify(error)}`)
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
0
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
0
uni_modules/lime-f2/components/lime-f2/index.vue
Normal file
82
uni_modules/lime-f2/package.json
Normal file
82
uni_modules/lime-f2/package.json
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
{
|
||||||
|
"id": "lime-f2",
|
||||||
|
"displayName": "蚂蚁图表 antv F2（暂时停止，请不要下载使用）",
|
||||||
|
"version": "0.5.4",
|
||||||
|
"description": "全端兼容,一个专注于移动,开箱即用的可视化解决方案",
|
||||||
|
"keywords": [
|
||||||
|
"蚂蚁金服",
|
||||||
|
"AntV",
|
||||||
|
"F2",
|
||||||
|
"canvas",
|
||||||
|
"图表"
|
||||||
|
],
|
||||||
|
"repository": "https://gitee.com/liangei/lime-f2",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "u",
|
||||||
|
"Edge": "u",
|
||||||
|
"Firefox": "u",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
}
|
||||||
|
}
|
||||||
356
uni_modules/lime-f2/readme.md
Normal file
356
uni_modules/lime-f2/readme.md
Normal file
@@ -0,0 +1,356 @@
|
|||||||
|
# F2 图表 <span style="font-size:16px;">👑👑👑👑👑 <span style="background:#ff9d00;padding:2px 4px;color:#fff;font-size:10px;border-radius: 3px;">全端</span></span>
|
||||||
|
> F2，一个专注于移动，开箱即用的可视化解决方案 [查看更多 站点2](https://limeui.qcoon.cn/#/f2) | [查看更多 站点2](http://liangei.gitee.io/limeui/#/f2)
|
||||||
|
> 基于antv F2 做了兼容处理，更多示例请访问 [uni示例 站点1](https://limeui.qcoon.cn/#/f2-example) | [uni示例 站点2](http://liangei.gitee.io/limeui/#/f2-example) | [官方示例](https://f2.antv.vision/zh/examples/gallery)
|
||||||
|
> Q群：1046793420
|
||||||
|
> antv F2 v3.8.9
|
||||||
|
|
||||||
|
|
||||||
|
## 平台兼容
|
||||||
|
|
||||||
|
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|
||||||
|
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
|
||||||
|
| √ | √ | √ | √ | √ | √ | √ |
|
||||||
|
|
||||||
|
|
||||||
|
* ✨ **注意**
|
||||||
|
* 🔔 插件用到了 css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装
|
||||||
|
* 🌈 本插件使用了`webview`支持`nvue`。
|
||||||
|
* 📦 本插件没有对F2内部的方法和样式做过改动，只是使其兼容uniapp。
|
||||||
|
* 🔔 若F2无法满足于你或有需要特殊能力的请直接去F2 提建议
|
||||||
|
* 👉 若F2有兼容问题可向我反馈。
|
||||||
|
* 🔔 默认只提供`f2.min.js`,如果需要`f2-all`或`f2-simple`可去码云下载按自已需要引入！
|
||||||
|
|
||||||
|
## 安装
|
||||||
|
在uniapp 插件市场 找到 [蚂蚁图表](https://ext.dcloud.net.cn/plugin?id=4613) 导入即可
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
通过`ref`获取节点组件内部`init`方法生成图表
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 非 nvue 页面需要引进
|
||||||
|
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2.min.js';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
const chart = new F2.Chart(config);
|
||||||
|
chart.source(this.baseData);
|
||||||
|
chart
|
||||||
|
.interval()
|
||||||
|
.position('genre*sold')
|
||||||
|
.color('genre');
|
||||||
|
chart.render();
|
||||||
|
// 需要把 chart 返回
|
||||||
|
return chart;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 图饼
|
||||||
|
图饼示例，更多用法和示例请访问[F2 示例](http://liangei.gitee.io/limeui/#/f2-example)
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pieMap: {
|
||||||
|
'芳华': '40%',
|
||||||
|
'妖猫传': '20%',
|
||||||
|
'机器之血': '18%',
|
||||||
|
'心理罪': '15%',
|
||||||
|
'寻梦环游记': '5%',
|
||||||
|
'其他': '2%'
|
||||||
|
},
|
||||||
|
pieData: [
|
||||||
|
{
|
||||||
|
name: '芳华',
|
||||||
|
percent: 0.4,
|
||||||
|
a: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '妖猫传',
|
||||||
|
percent: 0.2,
|
||||||
|
a: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '机器之血',
|
||||||
|
percent: 0.18,
|
||||||
|
a: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '心理罪',
|
||||||
|
percent: 0.15,
|
||||||
|
a: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '寻梦环游记',
|
||||||
|
percent: 0.05,
|
||||||
|
a: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '其他',
|
||||||
|
percent: 0.02,
|
||||||
|
a: '1'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
const chart = new F2.Chart(config);
|
||||||
|
chart.source(this.pieData, {
|
||||||
|
percent: {
|
||||||
|
formatter: val => val * 100 + '%';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.legend({
|
||||||
|
position: 'right',
|
||||||
|
itemFormatter: val => val + ' ' + this.pieMap[val];
|
||||||
|
});
|
||||||
|
chart.tooltip(false);
|
||||||
|
chart.coord('polar', {
|
||||||
|
transposed: true,
|
||||||
|
radius: 0.85
|
||||||
|
});
|
||||||
|
chart.axis(false);
|
||||||
|
chart
|
||||||
|
.interval()
|
||||||
|
.position('a*percent')
|
||||||
|
.color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
|
||||||
|
.adjust('stack')
|
||||||
|
.style({
|
||||||
|
lineWidth: 1,
|
||||||
|
stroke: '#fff',
|
||||||
|
lineJoin: 'round',
|
||||||
|
lineCap: 'round'
|
||||||
|
})
|
||||||
|
.animate({
|
||||||
|
appear: {
|
||||||
|
duration: 1200,
|
||||||
|
easing: 'bounceOut'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
chart.render();
|
||||||
|
// 需要把 chart 返回
|
||||||
|
return chart;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 数据更新
|
||||||
|
> F2 更新数据的方式有三种：
|
||||||
|
|
||||||
|
|
||||||
|
1、通过 `ref` 获取组件实例，使用内部方法`changeData(data)`更新数据
|
||||||
|
- 前后数据结构不发生变化，需要马上更新图表。
|
||||||
|
```js
|
||||||
|
this.$refs.chart.changeData(data)
|
||||||
|
```
|
||||||
|
|
||||||
|
2、在节点上设置 `source` 源数据和 `isAutoPlay` 自动更新。
|
||||||
|
- 前后数据结构不发生变化，需要马上更新图表。
|
||||||
|
```html
|
||||||
|
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" is-auto-play></l-f2></view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3、如果仅仅是更新数据，而不需要马上更新图表，在节点上设置 `source` 源数据，然后在需要更新图表时调用内部方法 `repaint()` 或在节点上设置 `isAutoPlay` 为 `true`
|
||||||
|
- 前后数据结构不发生变化，不需要立即更新数据
|
||||||
|
```html
|
||||||
|
<view style="width: 100%; height:500rpx"><l-f2 ref="chart" :source="data" :isAutoPlay="isAutoPlay"></l-f2></view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 1 调用内部方法
|
||||||
|
this.$refs.chart.repaint();
|
||||||
|
// 2 先设置isAutoPlay为false,再需要时设置为true
|
||||||
|
this.isAutoPlay = true
|
||||||
|
```
|
||||||
|
|
||||||
|
4、更新数据时还可以清除图表上的所有元素，重新定义图形语法，改变图表类型和各种配置。
|
||||||
|
- 前后数据结构发生变化 或 需要更改text等元素。
|
||||||
|
|
||||||
|
```js
|
||||||
|
this.$refs.chart.reset(chart => {
|
||||||
|
const baseData = [{ genre: '成犬粮', sold: 375 }, { genre: '化毛膏', sold: 15 }, { genre: '益生菌', sold: 20 }, { genre: '氨糖', sold: 240 }, { genre: '其它', sold: 150 }];
|
||||||
|
chart.clear() // 清理所有
|
||||||
|
chart.source(baseData); // 加载新数据
|
||||||
|
chart.interval().position('genre*sold').color('sold'); // 重新定义图形语法
|
||||||
|
chart.render();
|
||||||
|
return chart;
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Nvue
|
||||||
|
本插件通过`webview`组件使得 `antv F2` 能在`nvue`里使用。
|
||||||
|
|
||||||
|
* ✨ **温馨提示**
|
||||||
|
* 🔔 Nvue 是指 app nvue，非使用nvue打包到小程序 h5等平台。
|
||||||
|
* 👉 webview使用了网络路径，可自行下载放置根目录下的`hybrid`文件夹里再修改路径即可。
|
||||||
|
* 🛡 **不需要引进F2 JS文件**，但需求引入插件
|
||||||
|
* ⚙️ 在函数外面的数据需要通过`init`方法的第二个参数传递数据
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view class="f2"><l-f2 ref="chart"></l-f2></view>
|
||||||
|
```
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
const chart = new F2.Chart(config);
|
||||||
|
// 在函数外面的数据，需要在第二个参数传进去。
|
||||||
|
// 数据名保持跟this里的一致
|
||||||
|
chart.source(baseData);
|
||||||
|
chart
|
||||||
|
.interval()
|
||||||
|
.position('genre*sold')
|
||||||
|
.color('genre');
|
||||||
|
chart.render();
|
||||||
|
return chart;
|
||||||
|
},
|
||||||
|
// 在函数外面的数据需要传进组件
|
||||||
|
{baseData: this.baseData}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
## Nvue 使用注意事项
|
||||||
|
- 由于 nvue 使用的是字符串模板传输，打包的时候会被混淆压缩
|
||||||
|
- 所在要保持 **关键词** 不被 **混淆压缩**
|
||||||
|
|
||||||
|
#### 1、F2、DataSet 不需要被引入
|
||||||
|
|
||||||
|
👎 错误
|
||||||
|
|
||||||
|
```js
|
||||||
|
import F2 from '@/uni_modules/l-f2/components/l-f2/f2-all.min.js';
|
||||||
|
import DataSet from '@/antv/DataSet'
|
||||||
|
export default {
|
||||||
|
...code
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
👍 正确
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
...code
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2、引用函数外面数据的**关键词**不需要声明
|
||||||
|
|
||||||
|
👎 错误
|
||||||
|
|
||||||
|
```js
|
||||||
|
const {data} = this
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
chart.source(data);
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
👍 正确
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 所有用函数外里的数据，只要保持跟 this 里的一致
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
chart.source(data);
|
||||||
|
})
|
||||||
|
|
||||||
|
- or -
|
||||||
|
|
||||||
|
this.$refs.chart.init(config => {
|
||||||
|
chart.source(this.data);
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3、引用函数外面的数据需要通过**params**或函数的第二个参数传递
|
||||||
|
|
||||||
|
👎 错误
|
||||||
|
|
||||||
|
```html
|
||||||
|
<l-f2 />
|
||||||
|
|
||||||
|
- or -
|
||||||
|
|
||||||
|
this.$refs.chart.init(config => {...code})
|
||||||
|
```
|
||||||
|
|
||||||
|
👍 正确
|
||||||
|
|
||||||
|
```html
|
||||||
|
<l-f2 :params="{data}"/>
|
||||||
|
|
||||||
|
- or -
|
||||||
|
|
||||||
|
this.$refs.chart.init(config => {...code}, {data: this.data})
|
||||||
|
```
|
||||||
|
|
||||||
|
## 不支持的功能
|
||||||
|
- 目前由于小程序不支持 `document`，所以 `Guide.Html` 辅助元素组件目前仍无法使用，其他 F2 的功能全部支持。
|
||||||
|
- **Nvue**是通过`webview`实现的,所以它不受影响！
|
||||||
|
- **H5** uni官方 `canvas` 模拟了 小程序 所以也不支持 。
|
||||||
|
- 缩放手势暂时不支持，因为原厂也不支持小程序，将来如果有需要考虑修改源码。
|
||||||
|
- 词云只支持H5。
|
||||||
|
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
|
| --------------- | -------- | ------- | ------------ | ----- |
|
||||||
|
| custom-style | 自定义样式 | `string` | - | - |
|
||||||
|
| params | 仅针对nvue的数据传递,同init函数的第二个参数，两选一 | `object` | - | - |
|
||||||
|
| webviewStyles | 仅针对nvue的webview设置样式 | `object` | - | - |
|
||||||
|
| source | 图表数据 | `array` | - | 0.3.0 |
|
||||||
|
| type | canvas 类型 2d 仅针对微信和头条有效 | `string` | `2d` | 0.3.0 |
|
||||||
|
| isAutoPlay | 设置了上方的 图表数据 再 设置本参数 ，只要数据发生改动就更新图表 | `boolean` | `false` | 0.3.0 |
|
||||||
|
| is-disable-scroll | 触摸图表时是否禁止页面滚动 | `boolean` | `false` | |
|
||||||
|
|
||||||
|
## 事件
|
||||||
|
|
||||||
|
| 参数 | 说明 |
|
||||||
|
| --------------- | --------------- |
|
||||||
|
| init(callback, data) | **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||||
|
| changeData(data) | 更新数据 ，传递是数据数组 |
|
||||||
|
| clear() | 清除所有 |
|
||||||
|
| destroy() | 销毁实例 |
|
||||||
|
| repaint() | 用于暂时只更新数据，等需要时再调用重绘 |
|
||||||
|
| reset(callback, data) | 重新定义图形语法，改变图表类型和各种配置, **callback**: 回调函数 **data**: `nvue` 如果使用了外部数据，需要传递 |
|
||||||
|
| canvasToTempFilePath(opt) | 用于生成图片 |
|
||||||
|
|
||||||
|
## 打赏
|
||||||
|
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||||||
|
|
||||||
|
|
||||||
@@ -156,6 +156,7 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
height: $box-height;
|
height: $box-height;
|
||||||
line-height: $box-height - 7rpx;
|
line-height: $box-height - 7rpx;
|
||||||
|
align-items: center;
|
||||||
// width: 120px;
|
// width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
4911
unpackage/dist/dev/app-plus/app-service.js
vendored
4911
unpackage/dist/dev/app-plus/app-service.js
vendored
File diff suppressed because one or more lines are too long
3399
unpackage/dist/dev/app-plus/app-view.js
vendored
3399
unpackage/dist/dev/app-plus/app-view.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user