新增调货、发布界面，地址选择优化
This commit is contained in:
jia
parent
74377c7dd8
commit
c9cbc6a43c
18
api/api.js
18
api/api.js
@ -268,4 +268,22 @@ export function ajcaptchaCheck(data) {
|
||||
return request.post("ajcheck", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取所在的地区数据
|
||||
* @param {Object} data
|
||||
*/
|
||||
export function village(data) {
|
||||
return request.get('v2/system/geo/lst', data, { noAuth: true });
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所在的村队数据
|
||||
* @param {Object} data
|
||||
*/
|
||||
export function brigade(data) {
|
||||
return request.get('v2/system/brigade', data, { noAuth: true });
|
||||
}
|
||||
@ -36,7 +36,7 @@
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {getAddressList} from '@/api/user.js';
|
||||
import { getCityV2 } from '@/api/api.js';
|
||||
import { getCityV2,village } from '@/api/api.js';
|
||||
import { mapGetters } from "vuex";
|
||||
const CACHE_ADDRESS = {};
|
||||
export default {
|
||||
@ -87,25 +87,74 @@
|
||||
this.loadAddress(0)
|
||||
},
|
||||
methods: {
|
||||
change(pid,index){
|
||||
change(pid){
|
||||
if(this.selectedIndex == index) return;
|
||||
if(pid === -1){
|
||||
pid = this.selectedArr.length ? this.selectedArr[this.selectedArr.length -1].id : 0;
|
||||
}
|
||||
console.log(index)
|
||||
this.selectedIndex = index;
|
||||
this.loadAddress(pid);
|
||||
},
|
||||
loadAddress(pid){
|
||||
loadAddress(pid,type){
|
||||
if(CACHE_ADDRESS[pid]){
|
||||
this.addressList = CACHE_ADDRESS[pid];
|
||||
return ;
|
||||
}
|
||||
this.is_loading = true;
|
||||
getCityV2(pid).then(res=>{
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[pid] = res.data;
|
||||
this.addressList = res.data;
|
||||
})
|
||||
// getCityV2(pid).then(res=>{
|
||||
|
||||
// this.is_loading = false;
|
||||
// CACHE_ADDRESS[pid] = res.data;
|
||||
// this.addressList = res.data;
|
||||
// })
|
||||
|
||||
if(type=='province'){
|
||||
|
||||
village({province_code:pid}).then(res=>{
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[pid] = res.data;
|
||||
this.addressList = res.data;
|
||||
|
||||
})
|
||||
}else if(type=='city'){
|
||||
village({city_code:pid}).then(res=>{
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[pid] = res.data;
|
||||
this.addressList = res.data;
|
||||
|
||||
})
|
||||
}else if(type=='area'){
|
||||
village({area_code:pid}).then(res=>{
|
||||
if(res.data.length>0){
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[pid] = res.data;
|
||||
this.addressList = res.data;
|
||||
}else{
|
||||
this.$emit('submit', [...this.selectedArr]);
|
||||
this.$emit('changeClose');
|
||||
}
|
||||
})
|
||||
}else if(type=='street'){
|
||||
village({street_code:pid}).then(res=>{
|
||||
if(res.data.length>0){
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[pid] = res.data;
|
||||
this.addressList = res.data;
|
||||
}else{
|
||||
this.$emit('submit', [...this.selectedArr]);
|
||||
this.$emit('changeClose');
|
||||
}
|
||||
})
|
||||
}else{
|
||||
|
||||
village().then(res=>{
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[pid] = res.data;
|
||||
this.addressList = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
this.goTop()
|
||||
},
|
||||
selected(item){
|
||||
@ -114,17 +163,49 @@
|
||||
this.selectedArr.splice(this.selectedIndex + 1,999)
|
||||
this.selectedArr[this.selectedIndex] = item;
|
||||
this.selectedIndex = -1;
|
||||
}else if(!item.parent_id){
|
||||
}
|
||||
|
||||
// else if(!item.parent_id){
|
||||
// this.selectedArr = [item];
|
||||
// }else{
|
||||
// this.selectedArr.push(item);
|
||||
// }
|
||||
else if(!item.id){
|
||||
this.selectedArr = [item];
|
||||
}else{
|
||||
this.selectedArr.push(item);
|
||||
|
||||
if(this.selectedArr.length>4){
|
||||
let arry=[]
|
||||
arry.push(item)
|
||||
this.selectedArr=arry
|
||||
}else{
|
||||
this.selectedArr.push(item);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if(item.snum){
|
||||
this.loadAddress(item.id);
|
||||
|
||||
if(item.type=="province"){
|
||||
|
||||
this.loadAddress(item.code,"province");
|
||||
|
||||
}else if(item.type=="city"){
|
||||
this.loadAddress(item.code,"city");
|
||||
}else if(item.type=="area"){
|
||||
this.loadAddress(item.code,"area");
|
||||
}else if(item.type=="street"){
|
||||
this.loadAddress(item.code,"street");
|
||||
} else {
|
||||
this.$emit('submit', [...this.selectedArr]);
|
||||
this.$emit('changeClose');
|
||||
}
|
||||
|
||||
// if(item.snum){
|
||||
// this.loadAddress(item.id);
|
||||
// } else {
|
||||
// this.$emit('submit', [...this.selectedArr]);
|
||||
// this.$emit('changeClose');
|
||||
// }
|
||||
this.goTop()
|
||||
},
|
||||
close: function() {
|
||||
|
||||
185
components/release/release.vue
Normal file
185
components/release/release.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<view class="mark" v-if="isShow" @click="close">
|
||||
|
||||
<view class="release">
|
||||
<view class="release_content" v-for="(item,i) in list" :key="i" @click="navigtion(item)">
|
||||
<view class="release_content_left">
|
||||
<view :class="i==1?'release_imga':'release_img'">
|
||||
<image :src="item.img" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
<view class="title">
|
||||
<view class="title1">
|
||||
{{item.title1}}
|
||||
</view>
|
||||
<view class="title2">
|
||||
{{item.title2}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="release_content_right ">
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="release_close" @click="close">
|
||||
<image src="@/static/images/trad-close.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
navigateTo
|
||||
} from '../../libs/uniApi'
|
||||
export default {
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 子组件接收一个布尔类型的bottom，如果为true则弹窗则在页面的底部，false为默认居中显示
|
||||
bottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
img: require('@/static/images/season.png'),
|
||||
title1: '发布调货商品',
|
||||
title2: '镇街店铺快捷调货',
|
||||
},
|
||||
{
|
||||
img: require('@/static/images/discounts.png'),
|
||||
title1: '发布打折商品',
|
||||
title2: '发布店铺打折商品',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigtion(item) {
|
||||
if (item.title1 = '发布调货商品') {
|
||||
uni.navigateTo({
|
||||
url: '/pages/trading_hall/adddiscounts/index'
|
||||
})
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
confirm() {
|
||||
this.$emit('confirm')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mark {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.release {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.release_content {
|
||||
width: 694rpx;
|
||||
height: 137rpx;
|
||||
background: #FCF3EE;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
opacity: 1;
|
||||
margin-bottom: 21rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 26rpx;
|
||||
|
||||
.release_content_left {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.release_content_right {
|
||||
height: 137rpx;
|
||||
line-height: 137rpx;
|
||||
|
||||
}
|
||||
|
||||
.release_img {
|
||||
width: 111rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 21rpx;
|
||||
margin-right: 19rpx;
|
||||
margin-left: -15rpx;
|
||||
|
||||
image {
|
||||
width: 111rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.release_imga {
|
||||
width: 76rpx;
|
||||
height: 113rpx;
|
||||
margin-left: 21rpx;
|
||||
margin-top: 5rpx;
|
||||
margin-right: 19rpx;
|
||||
|
||||
image {
|
||||
width: 76rpx;
|
||||
height: 113rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 21rpx;
|
||||
}
|
||||
|
||||
.title1 {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title2 {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-top: 9rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.release_close {
|
||||
width: 248rpx;
|
||||
height: 248rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
image {
|
||||
width: 248rpx;
|
||||
height: 248rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
531
components/shoppinglist/shoppinglist.vue
Normal file
531
components/shoppinglist/shoppinglist.vue
Normal file
@ -0,0 +1,531 @@
|
||||
<template>
|
||||
<view class="containers" :style="viewColor">
|
||||
<view class="header">
|
||||
|
||||
<view class="search">
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
<input type="text" placeholder="请输入商品名称" v-model="searchVal" @input="setValue" confirm-type="search"
|
||||
@confirm="searchBut()" placeholder-class='placeholder'>
|
||||
</view>
|
||||
|
||||
<view class="iconclose" @click="close">
|
||||
X
|
||||
</view>
|
||||
</view>
|
||||
<view class="main">
|
||||
<scroll-view scroll-y="true">
|
||||
<block>
|
||||
<view v-if="bought.length" @touchmove="onTouchmove" id="goods">
|
||||
<view class="picTxt acea-row" v-for="(item, index) in bought" :key="index">
|
||||
<view class="checkbox">
|
||||
<text @click.stop="goodsCheck(item,index)" v-if="item.check"
|
||||
class="iconfont icon-xuanzhong1"></text>
|
||||
<text @click.stop="goodsCheck(item,index)" v-else
|
||||
:class="checkedArr.length >=5 ? 'disabled': ''"
|
||||
class="iconfont icon-weixuanzhong"></text>
|
||||
</view>
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
</view>
|
||||
|
||||
<view class='text'>
|
||||
<view class='line2 name'>{{item.store_name}}</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
采购价格:100 库存:100
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="picTxt_price">
|
||||
<view class="price">
|
||||
<span>出售价格</span>
|
||||
<input type="text" value="" placeholder="输入出售价格" />
|
||||
</view>
|
||||
<view class="price_num">
|
||||
<span>出售数量</span>
|
||||
<subtractive
|
||||
|
||||
style="margin-top: -10rpx;margin-left: 30rpx;"
|
||||
class="step"
|
||||
:min="1"
|
||||
:max="100"
|
||||
:value="peicenumber"
|
||||
:isMax="true"
|
||||
:isMin="true"
|
||||
:index="11"
|
||||
@eventChange="numberChange"
|
||||
></subtractive>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty">
|
||||
<image src="/static/images/no_thing.png"></image>
|
||||
<text>暂无内容哦~</text>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view class="foot_bar">
|
||||
<button class="confirm_btn" @click="submit">确定({{checkedArr.length}})</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading from '@/components/Loading/index.vue';
|
||||
import subtractive from '@/components/subtractive/subtractive.vue';
|
||||
import {
|
||||
boughtLstApi,
|
||||
collectLstApi,
|
||||
browseLstApi
|
||||
} from "@/api/community";
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
checkedObj: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['viewColor']),
|
||||
components: {
|
||||
Loading,
|
||||
subtractive
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isActive: 0,
|
||||
loadedb: false,
|
||||
loadingb: false,
|
||||
loadedc: false,
|
||||
loadingc: false,
|
||||
loadeds: false,
|
||||
loadings: false,
|
||||
whereb: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
keyword: '',
|
||||
},
|
||||
peicenumber:0,
|
||||
wherec: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
keyword: '',
|
||||
},
|
||||
wheres: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
keyword: '',
|
||||
},
|
||||
searchVal: "",
|
||||
checked: [],
|
||||
list: [],
|
||||
collect: [],
|
||||
bought: [],
|
||||
browse: [],
|
||||
checkedArr: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
checkedObj: {
|
||||
handler(n) {
|
||||
// this.checkedArr = n
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkedArr = this.checkedObj
|
||||
this.getBounht();
|
||||
this.getCollect();
|
||||
this.getBrowse();
|
||||
},
|
||||
methods: {
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
numberChange(data){
|
||||
this.peicenumber = data.number;
|
||||
},
|
||||
tabs(index) {
|
||||
this.isActive = index
|
||||
this.$set(this.whereb, 'keyword', '');
|
||||
|
||||
this.searchVal = ''
|
||||
this.searchBut()
|
||||
},
|
||||
onTouchmove(e) {
|
||||
if (this.loadendb) return;
|
||||
if (this.loadingb) return;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#goods').boundingClientRect(data => {
|
||||
if (data.bottom < 1500 && data.top < 0) {
|
||||
this.getBounht();
|
||||
}
|
||||
}).exec();
|
||||
// 模拟触底刷新
|
||||
},
|
||||
onTouchmove1(e) {
|
||||
if (this.loadendc) return;
|
||||
if (this.loadingc) return;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#collect').boundingClientRect(data => {
|
||||
if (data.bottom < 1500 && data.top < 0) {
|
||||
this.getCollect();
|
||||
}
|
||||
}).exec();
|
||||
// 模拟触底刷新
|
||||
},
|
||||
onTouchmove2(e) {
|
||||
if (this.loadends) return;
|
||||
if (this.loadings) return;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#browse').boundingClientRect(data => {
|
||||
if (data.bottom < 1500 && data.top < 0) {
|
||||
this.getBrowse();
|
||||
}
|
||||
}).exec();
|
||||
// 模拟触底刷新
|
||||
},
|
||||
setValue: function(event) {
|
||||
this.$set(this.whereb, 'keyword', event.detail.value);
|
||||
|
||||
},
|
||||
searchBut() {
|
||||
|
||||
this.getBounht()
|
||||
},
|
||||
getBounht() {
|
||||
var that = this;
|
||||
if (that.loadingb || that.loadedb) return;
|
||||
that.loadingb = true;
|
||||
boughtLstApi(that.whereb).then(
|
||||
res => {
|
||||
that.loadingb = false;
|
||||
that.loadedb = res.data.list.length < that.whereb.limit;
|
||||
that.bought.push.apply(that.bought, res.data.list);
|
||||
that.whereb.page = that.whereb.page + 1;
|
||||
that.getInitchecked(that.bought);
|
||||
},
|
||||
error => {
|
||||
that.$util.Tips({
|
||||
title: error.msg
|
||||
})
|
||||
}
|
||||
);
|
||||
},
|
||||
getCollect() {
|
||||
var that = this;
|
||||
if (that.loadingc || that.loadedc) return;
|
||||
that.loadingc = true;
|
||||
collectLstApi(that.wherec).then(
|
||||
res => {
|
||||
that.loadingc = false;
|
||||
that.loadedc = res.data.list.length < that.wherec.limit;
|
||||
that.collect.push.apply(that.collect, res.data.list);
|
||||
that.wherec.page = that.wherec.page + 1;
|
||||
that.getInitchecked(that.collect);
|
||||
},
|
||||
error => {
|
||||
that.$util.Tips({
|
||||
title: error.msg
|
||||
})
|
||||
}
|
||||
);
|
||||
},
|
||||
getBrowse() {
|
||||
var that = this;
|
||||
if (that.loadings || that.loadeds) return;
|
||||
that.loadings = true;
|
||||
browseLstApi(that.wheres).then(
|
||||
res => {
|
||||
that.loadings = false;
|
||||
that.loadeds = res.data.list.length < that.wheres.limit;
|
||||
that.browse.push.apply(that.browse, res.data.list);
|
||||
that.wheres.page = that.wheres.page + 1;
|
||||
that.getInitchecked(that.browse);
|
||||
},
|
||||
error => {
|
||||
that.$util.Tips({
|
||||
title: error.msg
|
||||
})
|
||||
}
|
||||
);
|
||||
},
|
||||
/*获取初始化选中的数据*/
|
||||
getInitchecked(arr) {
|
||||
let that = this;
|
||||
arr.forEach((item, index) => {
|
||||
that.$set(item, 'check', false);
|
||||
that.checkedArr.forEach((val, i) => {
|
||||
if ((item.spu_id == (val.spu && val.spu.spu_id)) || (item.spu_id == val.spu_id)) {
|
||||
that.$set(item, 'check', true);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/*已选中的商品打钩*/
|
||||
getCheckedGoods() {
|
||||
this.checked = []
|
||||
this.checkedArr.forEach((item, index) => {
|
||||
this.check.push(item)
|
||||
})
|
||||
},
|
||||
/*点击选中与否*/
|
||||
goodsCheck(item, index) {
|
||||
this.$set(item, 'check', !item.check);
|
||||
if (item.check) {
|
||||
this.checkedArr.push(item)
|
||||
} else {
|
||||
this.checkedArr.splice(this.checkedArr.findIndex(itemn => ((itemn.spu_id == item.spu_id) || (item
|
||||
.spu_id == (
|
||||
itemn.spu && itemn.spu.spu_id)))), 1)
|
||||
}
|
||||
},
|
||||
/*确定提交*/
|
||||
submit() {
|
||||
this.$emit('getProduct', this.checkedArr);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.containers {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
padding: 40rpx 0;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
text {
|
||||
position: relative;
|
||||
margin: 0 50rpx;
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
|
||||
&.on {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
height: 5rpx;
|
||||
background: var(--view-theme);
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconclose {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: -150rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin-top: 44rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 30rpx;
|
||||
padding: 12rpx 30rpx 12rpx 66rpx;
|
||||
position: relative;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
color: #939393;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sub_title {
|
||||
color: #282828;
|
||||
font-size: 26rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #8A8A8A;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
height: 650rpx;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 650rpx;
|
||||
margin: 40rpx 0 80rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.picTxt {
|
||||
width: 100%;
|
||||
padding: 25rpx 0;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
border-top: 2rpx solid #E7E6E4;
|
||||
|
||||
.picTxt_price {
|
||||
display: flex;
|
||||
margin-top: 37rpx;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
margin-right: 30rpx;
|
||||
|
||||
input {
|
||||
width: 168rpx;
|
||||
height: 39rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
.price_num{
|
||||
display: flex;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 30rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 38rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.icon-xuanzhong1 {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.pictrue {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 430rpx;
|
||||
margin-left: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
position: relative;
|
||||
height: 160rpx;
|
||||
|
||||
.name {
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: var(--view-priceColor);
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foot_bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
// bottom: 54px;
|
||||
left: 0;
|
||||
padding: 20rpx 0;
|
||||
z-index: 5;
|
||||
|
||||
.confirm_btn {
|
||||
width: 710rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background: var(--view-theme);
|
||||
border-radius: 43rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 130rpx 0 150rpx;
|
||||
text-align: center;
|
||||
|
||||
image,
|
||||
uni-image {
|
||||
display: inline-block;
|
||||
width: 414rpx;
|
||||
height: 305rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
display: block;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
208
components/subtractive/subtractive.vue
Normal file
208
components/subtractive/subtractive.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="uni-numbox">
|
||||
<!-- -部分 -->
|
||||
<view class="uni-numbox-minus" @click="_calcValue('subtract')">
|
||||
<text :class="minDisabled?'uni-numbox-disabled': ''">-</text>
|
||||
</view>
|
||||
<!-- 中间输入数值部分 -->
|
||||
<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
|
||||
<!-- + 部分 -->
|
||||
<view class="uni-numbox-plus" @click="_calcValue('add')">
|
||||
<text :class="maxDisabled?'uni-numbox-disabled': ''">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'uni-number-box',
|
||||
props: {
|
||||
// isMax 是否有上限设置
|
||||
isMax: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// isMin 是否有下限设置
|
||||
isMin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// index 唯一值，如果一个页面有多个数量增减组件时，起到唯一的作用
|
||||
index: {
|
||||
type: String,
|
||||
default: 0
|
||||
},
|
||||
// value 是数值
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// min 最小值
|
||||
min: {
|
||||
type: Number,
|
||||
default: -Infinity
|
||||
},
|
||||
// max 最大值
|
||||
max: {
|
||||
type: Number,
|
||||
default: Infinity
|
||||
},
|
||||
// step 步长
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// disabled 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: this.value,
|
||||
minDisabled: false,
|
||||
maxDisabled: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.maxDisabled = this.isMax;
|
||||
this.minDisabled = this.isMin;
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
inputValue(number) {
|
||||
const data = {
|
||||
number: number,
|
||||
index: this.index
|
||||
}
|
||||
this.$emit('eventChange', data);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_calcValue(type) {
|
||||
const scale = this._getDecimalScale();
|
||||
let value = this.inputValue * scale;
|
||||
let newValue = 0;
|
||||
let step = this.step * scale;
|
||||
|
||||
if (type === 'subtract') {
|
||||
newValue = value - step;
|
||||
if (newValue <= this.min) {
|
||||
this.minDisabled = true;
|
||||
}
|
||||
if (newValue < this.min) {
|
||||
newValue = this.min
|
||||
}
|
||||
if (newValue < this.max && this.maxDisabled === true) {
|
||||
this.maxDisabled = false;
|
||||
}
|
||||
} else if (type === 'add') {
|
||||
newValue = value + step;
|
||||
if (newValue >= this.max) {
|
||||
this.maxDisabled = true;
|
||||
}
|
||||
if (newValue > this.max) {
|
||||
newValue = this.max
|
||||
}
|
||||
if (newValue > this.min && this.minDisabled === true) {
|
||||
this.minDisabled = false;
|
||||
}
|
||||
}
|
||||
if (newValue === value) {
|
||||
return;
|
||||
}
|
||||
this.inputValue = newValue / scale;
|
||||
},
|
||||
_getDecimalScale() {
|
||||
let scale = 1;
|
||||
// 浮点型
|
||||
if (~~this.step !== this.step) {
|
||||
scale = Math.pow(10, (this.step + '').split('.')[1].length);
|
||||
}
|
||||
return scale;
|
||||
},
|
||||
_onBlur(event) {
|
||||
let value = event.detail.value;
|
||||
if (!value) {
|
||||
this.inputValue = 0;
|
||||
return
|
||||
}
|
||||
value = +value;
|
||||
if (value > this.max) {
|
||||
value = this.max;
|
||||
} else if (value < this.min) {
|
||||
value = this.min
|
||||
}
|
||||
|
||||
this.inputValue = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.uni-numbox {
|
||||
/* position:absolute; */
|
||||
/* left: 30upx;
|
||||
bottom: 0; */
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 200upx;
|
||||
height: 50upx;
|
||||
/* background:#f5f5f5; */
|
||||
}
|
||||
|
||||
.uni-numbox-minus {
|
||||
background: #EEEEEE !important;
|
||||
|
||||
color: #909399 !important;
|
||||
}
|
||||
|
||||
.uni-numbox-minus,
|
||||
.uni-numbox-plus {
|
||||
margin: 0;
|
||||
width: 53rpx;
|
||||
height: 53rpx;
|
||||
background-color: #F84221;
|
||||
opacity: 1;
|
||||
line-height: 53rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 40upx;
|
||||
}
|
||||
|
||||
.uni-numbox-minus .yticon,
|
||||
.uni-numbox-plus .yticon {
|
||||
font-size: 36upx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-numbox-minus {
|
||||
/* border-right: none;
|
||||
border-top-left-radius: 6upx;
|
||||
border-bottom-left-radius: 6upx; */
|
||||
}
|
||||
|
||||
.uni-numbox-plus {
|
||||
/* border-left: none;
|
||||
border-top-right-radius: 6upx;
|
||||
border-bottom-right-radius: 6upx; */
|
||||
}
|
||||
|
||||
.uni-numbox-value {
|
||||
position: relative;
|
||||
/* background-color: #f5f5f5; */
|
||||
width: 90upx;
|
||||
height: 50upx;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
font-size: 30upx;
|
||||
}
|
||||
|
||||
.uni-numbox-disabled.yticon {
|
||||
color: #d6d6d6;
|
||||
}
|
||||
</style>
|
||||
261
components/villageTeam/villageTeam.vue
Normal file
261
components/villageTeam/villageTeam.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view :style="viewColor">
|
||||
<view class="address-window" :class="display==true?'on':''">
|
||||
<view class='title'>请选择所在村队<text class='iconfont icon-guanbi' @tap='close'></text></view>
|
||||
<view class="address-count">
|
||||
<view class="address-selected">
|
||||
<view v-for="(item,index) in selectedArr" :key="index" class="selected-list" :class="{active:index === selectedIndex}" @click="change(item.parent_id, index)">
|
||||
{{item.name}}
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
<view class="selected-list" :class="{active:-1 === selectedIndex}" v-if="showMore" @click="change(-1, -1)">
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
请选择
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" :scroll-top="scrollTop" class="address-list" @scroll="scroll">
|
||||
<view v-for="(item,index) in addressList" :key="index" class="list" :class="{active:item.id === activeId}" @click="selected(item)">
|
||||
<text class="item-name">{{item.name}}</text>
|
||||
<text v-if="item.id === activeId" class="iconfont icon-duihao2"></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='display==false' @tap='close'></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {getAddressList} from '@/api/user.js';
|
||||
import {brigade } from '@/api/api.js';
|
||||
import { mapGetters } from "vuex";
|
||||
const CACHE_ADDRESS = {};
|
||||
export default {
|
||||
props: {
|
||||
display: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
address: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
//地址列表
|
||||
addressList: [],
|
||||
selectedArr: [],
|
||||
selectedIndex: -1,
|
||||
is_loading: false,
|
||||
old: { scrollTop: 0 },
|
||||
scrollTop: 0
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters(['viewColor']),
|
||||
activeId(){
|
||||
return this.selectedIndex == -1 ? 0 : this.selectedArr[this.selectedIndex].id
|
||||
},
|
||||
showMore(){
|
||||
return this.selectedArr.length ? this.selectedArr[this.selectedArr.length - 1].snum > 0 : true
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
address(n){
|
||||
this.selectedArr = n ? [...n] : []
|
||||
},
|
||||
display(n){
|
||||
if(!n) {
|
||||
this.addressList = [];
|
||||
this.selectedArr = this.address ? [...this.address] : [];
|
||||
this.selectedIndex = -1;
|
||||
this.is_loading = false;
|
||||
}else{
|
||||
this.loadAddress()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadAddress()
|
||||
},
|
||||
methods: {
|
||||
change(pid,index){
|
||||
if(this.selectedIndex == index) return;
|
||||
if(pid === -1){
|
||||
pid = this.selectedArr.length ? this.selectedArr[this.selectedArr.length -1].id : 0;
|
||||
}
|
||||
console.log(index)
|
||||
this.selectedIndex = index;
|
||||
this.loadAddress();
|
||||
},
|
||||
loadAddress(pid){
|
||||
if(CACHE_ADDRESS[pid]){
|
||||
this.addressList = CACHE_ADDRESS[pid];
|
||||
return ;
|
||||
}
|
||||
this.is_loading = true;
|
||||
brigade(pid).then(res=>{
|
||||
console.log(res.data)
|
||||
this.is_loading = false;
|
||||
CACHE_ADDRESS[pid] = res.data;
|
||||
this.addressList = res.data;
|
||||
})
|
||||
this.goTop()
|
||||
},
|
||||
selected(item){
|
||||
if(this.is_loading) return;
|
||||
if(this.selectedIndex > -1){
|
||||
this.selectedArr.splice(this.selectedIndex + 1,999)
|
||||
this.selectedArr[this.selectedIndex] = item;
|
||||
this.selectedIndex = -1;
|
||||
}else if(!item.parent_id){
|
||||
this.selectedArr = [item];
|
||||
}else{
|
||||
this.selectedArr.push(item);
|
||||
}
|
||||
if(item.snum){
|
||||
this.loadAddress(item.id);
|
||||
} else {
|
||||
this.$emit('submit', [...this.selectedArr]);
|
||||
this.$emit('changeClose');
|
||||
}
|
||||
this.goTop()
|
||||
},
|
||||
close: function() {
|
||||
this.$emit('changeClose');
|
||||
},
|
||||
scroll : function(e) {
|
||||
this.old.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
goTop: function(e) {
|
||||
this.scrollTop = this.old.scrollTop
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.address-window {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
}
|
||||
.address-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.address-window .title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
height: 123rpx;
|
||||
line-height: 123rpx;
|
||||
position: relative;
|
||||
}
|
||||
.address-window .title .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
color: #8a8a8a;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
.address-count{
|
||||
.address-selected{
|
||||
padding: 0 30rpx;
|
||||
margin-top: 10rpx;
|
||||
position: relative;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #f7f7f7;
|
||||
}
|
||||
.selected-list{
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
line-height: 50rpx;
|
||||
padding-bottom: 10rpx;
|
||||
padding-left: 60rpx;
|
||||
position: relative;
|
||||
&.active{
|
||||
color: #e28d54;
|
||||
}
|
||||
&:before,&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
&:before{
|
||||
width: 4rpx;
|
||||
height: 100%;
|
||||
background-color: var(--view-theme);
|
||||
top: 0;
|
||||
left: 10rpx;
|
||||
}
|
||||
&:after{
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: var(--view-theme);
|
||||
border-radius: 100%;
|
||||
left: 6rpx;
|
||||
top: 50%;
|
||||
margin-top: -8rpx;
|
||||
}
|
||||
&:first-child,&:last-child{
|
||||
&:before{
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
&:before{
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.iconfont{
|
||||
font-size: 20rpx;
|
||||
float: right;
|
||||
color: #dddddd;
|
||||
}
|
||||
}
|
||||
scroll-view{
|
||||
height: 550rpx;
|
||||
}
|
||||
.address-list{
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.list{
|
||||
.iconfont{
|
||||
float: right;
|
||||
color: #ddd;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.item-name{
|
||||
display: inline-block;
|
||||
line-height: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
&.active{
|
||||
color: #e28d54;
|
||||
.iconfont{
|
||||
color: #e28d54;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -10,8 +10,9 @@ let httpApiThree
|
||||
// let httpApi = 'http://192.168.31.110:8324' // 测试
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
// httpApi = 'https://shop.lihaink.cn' // 生产
|
||||
httpApi = "https://crmeb-test.shop.lihaink.cn"
|
||||
// httpApi = "https://crmeb-test.shop.lihaink.cn"
|
||||
// httpApi = "http://192.168.0.222"
|
||||
httpApi = "http://192.168.0.108:8325"
|
||||
// #ifdef MP-WEIXIN
|
||||
httpApiTwo = "https://nk.lihaink.cn"
|
||||
httpApiThree = 'http://ceshi-oa.lihaink.cn'
|
||||
|
||||
25
pages.json
25
pages.json
@ -694,13 +694,36 @@
|
||||
}, {
|
||||
"path": "trading_hall/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarTitleText": "交易大厅",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/trading_hall",
|
||||
"name": "trading_hall",
|
||||
"pages": [{
|
||||
"path": "adddiscounts/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新增调货",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
},{
|
||||
"path": "product_details/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
"root": "pages/store",
|
||||
"name": "store",
|
||||
|
||||
979
pages/trading_hall/adddiscounts/index.vue
Normal file
979
pages/trading_hall/adddiscounts/index.vue
Normal file
@ -0,0 +1,979 @@
|
||||
<template>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="viewColor">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP || H5 -->
|
||||
<view :style="viewColor">
|
||||
<!-- #endif -->
|
||||
<form @submit="formSubmit" report-submit='true'>
|
||||
<view class="release_content">
|
||||
<view class="release_tab acea-row">
|
||||
<view class="tab_item" v-for="(item, index) in tabList" :key="item.value"
|
||||
:class="{on:tabActive == item.value}" @click="changeTab(item)">
|
||||
<text class="iconfont" :class="item.icon"></text>{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="release_item">
|
||||
<view class="photo_count">
|
||||
<view class="input_photo acea-row row-middle">
|
||||
<block v-if="tabActive == 2">
|
||||
<view class="pictrue" v-if="formData.video_link">
|
||||
<view v-if="videoplay">
|
||||
<video controls id="myvideo" :src="video_link"
|
||||
@fullscreenchange="screenChange"></video>
|
||||
</view>
|
||||
<!--#ifndef APP-PLUS-->
|
||||
<video class="pictrue" :src="formData.video_link"></video>
|
||||
<!--#endif-->
|
||||
<image class="video-bg" mode="widthFix"
|
||||
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/3/video_bg.png">
|
||||
</image>
|
||||
<view class="videoHover" @click="videoshow">
|
||||
<view>
|
||||
<text class="iconfont icon-24gf-play"></text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="video-text">点击可预览视频</text>
|
||||
|
||||
<view class="close_btn" @click="delVideo"><text
|
||||
class="iconfont icon-guanbi4"></text></view>
|
||||
</view>
|
||||
<view v-else class="pictrue acea-row row-center-wrapper row-column add"
|
||||
@click="uploadVideo">
|
||||
<view><text class='iconfont icon-tianjiashipin'></text></view>
|
||||
<view class="text">添加视频</view>
|
||||
</view>
|
||||
<view v-if="formData.image.length < 1"
|
||||
class="pictrue acea-row row-center-wrapper row-column add"
|
||||
@click.stop="clk">
|
||||
<view><text class='iconfont icon-fengmian'></text></view>
|
||||
<view class="text">添加封面</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="pictrue" v-for="(item, index) in formData.image" :key="index">
|
||||
<easy-loadimage mode="widthFix" :image-src="item"></easy-loadimage>
|
||||
<text class="cover_text" v-if="tabActive == 2">封面</text>
|
||||
<view class="close_btn" @click="DelPic(index)"><text
|
||||
class="iconfont icon-guanbi4"></text></view>
|
||||
</view>
|
||||
<block v-if="tabActive == 1">
|
||||
<view v-if="formData.image.length < 6"
|
||||
class="pictrue acea-row row-center-wrapper row-column add"
|
||||
@click.stop="clk">
|
||||
<view><text class='iconfont icon-icon25201'></text></view>
|
||||
<view class="text">添加图片</view>
|
||||
</view>
|
||||
</block>
|
||||
<view v-if="showCd" :ratio="16/9" class="container">
|
||||
<bt-cropper ref="cropper" :imageSrc="imageSrc" @cropEnd="loadImage"
|
||||
:dWidth="800" :compress="true">
|
||||
<!-- 你想插入的内容 -->
|
||||
<button class="crop_btn" @click="crop">裁切</button>
|
||||
</bt-cropper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="textarea">
|
||||
<textarea placeholder='分享使用体验和心得，获得更多点赞和关注哦~(600字以内)' name="comment"
|
||||
placeholder-class='placeholder' v-model="formData.content"
|
||||
maxlength="600"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="release_item">
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view class='name'><text
|
||||
class="iconfont icon-baobeilianjie"></text>添加产品({{productList.length}})</view>
|
||||
<view class="select">
|
||||
<view class="select_count" @click.stop="addProduct">
|
||||
<text v-if="productList.length == 0" class="text">选择产品</text>
|
||||
<view v-else class="text">
|
||||
<image class="image" v-for="(item,index) in productList" :key="index"
|
||||
:src="item.image || (item.spu && item.spu.image)"></image>
|
||||
</view>
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view class='name' style="font-size: 28rpx;rfont-family: PingFang SC;font-weight: 400;color: #F84221;">价格：￥{{price}}</view>
|
||||
<view class="select">
|
||||
<view class="select_count" @click="addprice">
|
||||
<text v-if="!isshow" class="text1">点击输入价格</text>
|
||||
<view v-else @click.stop="deleteTopic">
|
||||
<input type="number" value="" v-model="price" placeholder="请输入价格"
|
||||
style="text-align: right;font-size: 28rpx;" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="release_btn button" form-type="submit">发布</button>
|
||||
</view>
|
||||
</form>
|
||||
<!--视频预览弹窗-->
|
||||
<view v-if="showVideo" class="video-count">
|
||||
<!--#ifndef APP-PLUS-->
|
||||
<video id="myVideo" class="videoLink" autoplay loop muted :src="formData.video_link"></video>
|
||||
<!--#endif-->
|
||||
<!--#ifdef APP-PLUS-->
|
||||
|
||||
<video id="myVideo" class="videoLink" autoplay loop
|
||||
:src='formData.video_link && (formData.video_link.substring(0,4) == "http" || formData.video_link.substring(0,5) == "https") ? formData.video_link : "http:" + formData.video_link'></video>
|
||||
<!--#endif-->
|
||||
</view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='showVideo==false' @tap="showVideo=false"></view>
|
||||
<avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx"
|
||||
selHeight="250upx">
|
||||
</avatar>
|
||||
<!-- 提到的宝贝弹窗 -->
|
||||
<uni-popup ref="associated" type="bottom">
|
||||
<associated @close="close" @getProduct="getProduct" :checkedObj="productList"></associated>
|
||||
</uni-popup>
|
||||
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse">
|
||||
</authorize>
|
||||
|
||||
<!-- <m-tabbar native>
|
||||
<template v-slot:tabbar_index_2>
|
||||
<view class="custom_style">
|
||||
<view class="custom_style_icon"></view>
|
||||
</view>
|
||||
</template>
|
||||
</m-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import authorize from '@/components/Authorize';
|
||||
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
||||
import associated from '@/components/shoppinglist/shoppinglist.vue';
|
||||
import participateTopic from '@/components/participateTopic.vue';
|
||||
import {
|
||||
TOKENNAME,
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app.js';
|
||||
import {
|
||||
createPlantApi,
|
||||
updatePlantApi,
|
||||
plantDetailApi,
|
||||
orderAssociatePlantApi
|
||||
} from "@/api/community";
|
||||
import {
|
||||
setStorage,
|
||||
getStorage
|
||||
} from '@/libs/uniApi.js';
|
||||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||||
import {
|
||||
configMap
|
||||
} from '@/utils';
|
||||
import store from '@/store';
|
||||
export default {
|
||||
components: {
|
||||
avatar,
|
||||
associated,
|
||||
participateTopic,
|
||||
authorize,
|
||||
easyLoadimage,
|
||||
mTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
image: [],
|
||||
content: "",
|
||||
topic_id: "",
|
||||
spu_id: [],
|
||||
video_link: ''
|
||||
},
|
||||
price:0,
|
||||
imageSrc: '',
|
||||
productList: [],
|
||||
topicName: {},
|
||||
isUpload: true,
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
showCd: false,
|
||||
isshow: false,
|
||||
id: "",
|
||||
order_id: "",
|
||||
imgName: "",
|
||||
upload_max: 50,
|
||||
uploadUrl: `${HTTP_REQUEST_URL}/api/upload/video`,
|
||||
tabList: [{
|
||||
name: '图文',
|
||||
value: 1,
|
||||
icon: 'icon-tuwen'
|
||||
},
|
||||
{
|
||||
name: '视频',
|
||||
value: 2,
|
||||
icon: 'icon-shipin'
|
||||
},
|
||||
],
|
||||
tabActive: 1,
|
||||
isPlay: false,
|
||||
videoContext: "",
|
||||
video_link: "",
|
||||
showVideo: false,
|
||||
videoplay: false,
|
||||
videoContext: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLogin', 'viewColor', 'uid']),
|
||||
...configMap({
|
||||
community_app_switch: []
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
// formData:{
|
||||
// handler(n){
|
||||
// if(!this.id){
|
||||
// setTimeout(()=>{
|
||||
// setStorage('addPlant', n);
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// deep: true
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// #ifndef APP-PLUS
|
||||
this.videoContext = uni.createVideoContext('myVideo', this);
|
||||
// #endif
|
||||
},
|
||||
onLoad(options) {
|
||||
// uni.hideTabBar()
|
||||
this.id = options.id;
|
||||
this.order_id = options.order_id;
|
||||
// console.log("options.order_id", options.order_id)
|
||||
this.tabActive = options.type || 1;
|
||||
if (this.community_app_switch.length == 1) {
|
||||
this.tabActive = this.community_app_switch[0]
|
||||
}
|
||||
if (!this.isLogin) {
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
} else {
|
||||
if (this.id) {
|
||||
this.getDetail()
|
||||
} else {
|
||||
// const data = getStorage('addPlant');
|
||||
// if(data){
|
||||
// this.formData.content = data.content || '';
|
||||
// this.formData.image = data.image || [];
|
||||
// }
|
||||
}
|
||||
if (this.order_id) this.getOrderGoods()
|
||||
}
|
||||
this.videoContext = uni.createVideoContext("myvideo", this);
|
||||
},
|
||||
onTabItemTap() {
|
||||
this.$refs.associated.close();
|
||||
this.formData.content = ''
|
||||
this.formData.image = []
|
||||
this.formData.topic_id = ''
|
||||
this.formData.spu_id = ''
|
||||
this.formData.video_link = ''
|
||||
this.productList = []
|
||||
this.topicName = {}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoadFun() {
|
||||
this.isShowAuth = false;
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e;
|
||||
},
|
||||
/*获取图文详情*/
|
||||
getDetail() {
|
||||
let that = this
|
||||
plantDetailApi(that.id).then(res => {
|
||||
that.formData = res.data
|
||||
that.productList = res.data.relevance || []
|
||||
that.topicName = res.data.topic || {}
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
/*获取关联订单商品*/
|
||||
getOrderGoods() {
|
||||
let that = this
|
||||
orderAssociatePlantApi(that.order_id).then(res => {
|
||||
that.productList = res.data || []
|
||||
that.formData.spu_id = res.data.map(val => val.spu_id)
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
/*点击输入价格*/
|
||||
addprice() {
|
||||
this.isshow = !this.isshow
|
||||
},
|
||||
/*切换tab*/
|
||||
changeTab(item) {
|
||||
if (this.tabActive == item.value) return
|
||||
this.tabActive = item.value
|
||||
this.formData.image = []
|
||||
},
|
||||
|
||||
clk() {
|
||||
let that = this
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original'],
|
||||
success: (res) => {
|
||||
// console.log(res)
|
||||
let tempFilePaths = res.tempFilePaths[0]
|
||||
//#ifdef APP-PLUS
|
||||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||||
that.doUpload(tempFilePaths)
|
||||
} else {
|
||||
let size = res.tempFiles[0].size / 1024
|
||||
if (size >= 1) {
|
||||
uni.compressImage({
|
||||
src: tempFilePaths,
|
||||
quality: 80, // 仅对jpg有效
|
||||
success: res => {
|
||||
that.imageSrc = res.tempFilePath;
|
||||
that.showCd = true;
|
||||
},
|
||||
fail: err => {
|
||||
// console.log('失败了compressImage', tempFilePaths);
|
||||
that.imageSrc = tempFilePaths
|
||||
that.showCd = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.imageSrc = tempFilePaths
|
||||
that.showCd = true
|
||||
}
|
||||
}
|
||||
//#endif
|
||||
//#ifndef APP-PLUS
|
||||
that.imageSrc = tempFilePaths
|
||||
that.showCd = true
|
||||
//#endif
|
||||
}
|
||||
})
|
||||
},
|
||||
crop() {
|
||||
uni.showLoading({
|
||||
title: '',
|
||||
mask: true
|
||||
})
|
||||
// 通过组件定义的ref调用cropper方法，返回一个promise对象
|
||||
this.$refs.cropper.crop().then(([err, res]) => {
|
||||
if (!err) {
|
||||
uni.hideLoading()
|
||||
this.doUpload(res.tempFilePath)
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
// console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
loadImage() {
|
||||
this.showCd = false
|
||||
},
|
||||
doUpload(rsp) {
|
||||
let that = this
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
mask: true
|
||||
})
|
||||
uni.uploadFile({
|
||||
url: HTTP_REQUEST_URL + '/api/upload/image/field',
|
||||
filePath: rsp,
|
||||
name: 'field',
|
||||
formData: {
|
||||
'filename': rsp,
|
||||
'name': that.imgName
|
||||
},
|
||||
header: {
|
||||
// #ifdef MP
|
||||
"Content-Type": "multipart/form-data",
|
||||
// #endif
|
||||
[TOKENNAME]: 'Bearer ' + store.state.app.token
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let imgData = JSON.parse(uploadFileRes.data)
|
||||
if (imgData.data.path) {
|
||||
that.formData.image.push(imgData.data.path)
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
complete(res) {
|
||||
let data = JSON.parse(res.data)
|
||||
// that.$util.Tips({
|
||||
// title: data.message
|
||||
// });
|
||||
}
|
||||
});
|
||||
},
|
||||
// 上传视频
|
||||
uploadVideo() {
|
||||
let that = this
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera', 'album'],
|
||||
success: res => {
|
||||
if (Math.ceil(res.size / 1024) < that.upload_max * 1024) {
|
||||
uni.uploadFile({
|
||||
url: that.uploadUrl, //仅为示例，非真实的接口地址
|
||||
filePath: res.tempFilePath,
|
||||
name: 'file',
|
||||
//请求参数
|
||||
formData: {
|
||||
user: 'test'
|
||||
},
|
||||
header: {
|
||||
// #ifdef MP
|
||||
'Content-Type': 'multipart/form-data',
|
||||
// #endif
|
||||
[TOKENNAME]: 'Bearer ' + store.state.app.token
|
||||
},
|
||||
success: uploadFileRes => {
|
||||
let data = JSON.parse(uploadFileRes.data);
|
||||
that.formData.video_link = (data.data.src);
|
||||
},
|
||||
complete: a => {
|
||||
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `视频超出限制${that.upload_max}MB,已过滤`
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
getImgName(name) {
|
||||
this.imgName = name
|
||||
},
|
||||
/**删除图片*/
|
||||
DelPic: function(index) {
|
||||
let that = this
|
||||
that.formData.image.splice(index, 1);
|
||||
},
|
||||
/*删除视频*/
|
||||
delVideo() {
|
||||
this.formData.video_link = '';
|
||||
},
|
||||
/*添加宝贝*/
|
||||
addProduct() {
|
||||
this.$refs.associated.open();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$refs.associated.close();
|
||||
this.$refs.participateTopic.close();
|
||||
},
|
||||
/*查看视频*/
|
||||
videoshow() {
|
||||
this.showVideo = true
|
||||
this.videoContext = uni.createVideoContext('myVideo', this);
|
||||
this.$nextTick(() => {
|
||||
this.videoContext.play();
|
||||
})
|
||||
// this.video_link = this.formData.video_link;
|
||||
// this.videoContext.requestFullScreen({ direction: 90 });
|
||||
// this.videoContext.play(); this.videoplay = true;
|
||||
},
|
||||
screenChange(e) {
|
||||
let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏
|
||||
// console.log(e, "qweeee========================================");
|
||||
if (!fullScreen) {
|
||||
this.videoplay = false
|
||||
//退出全屏 this.videoplay = false; // 隐藏播放盒子
|
||||
}
|
||||
},
|
||||
/*获取选中的宝贝*/
|
||||
getProduct(data) {
|
||||
this.productList = data;
|
||||
this.formData.spu_id = data.map(val => val.spu_id)
|
||||
this.$refs.associated.close();
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
formSubmit: function(e) {
|
||||
let that = this,
|
||||
value = that.formData;
|
||||
if (value.image.length == 0) return that.$util.Tips({
|
||||
title: '请添加话题图片'
|
||||
});
|
||||
if (!value.content) return that.$util.Tips({
|
||||
title: '请分享使用心得和体会'
|
||||
});
|
||||
if (that.tabActive == 2 && !value.video_link) {
|
||||
return that.$util.Tips({
|
||||
title: '请添加话题视频'
|
||||
});
|
||||
}
|
||||
if (!value.category_id || !value.topic_id) {
|
||||
return that.$util.Tips({
|
||||
title: '请选择话题'
|
||||
})
|
||||
}
|
||||
if (that.id) {
|
||||
if (value.relevance.length) {
|
||||
value.spu_id = value.relevance.map(val => (val.spu && val.spu.spu_id) || val.spu_id)
|
||||
}
|
||||
}
|
||||
value.order_id = that.order_id
|
||||
value.is_type = that.tabActive
|
||||
uni.showLoading({
|
||||
title: '保存中',
|
||||
mask: true
|
||||
})
|
||||
that.id ? updatePlantApi(that.id, value).then(res => {
|
||||
uni.hideLoading()
|
||||
that.$util.Tips({
|
||||
title: res.messge,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
if (that.tabActive == 2) {
|
||||
uni.navigateTo({
|
||||
//#ifdef APP
|
||||
url: '/pages/short_video/appSwiper/index?id=' + res.data
|
||||
.community_id + '&user=1&uid=' +
|
||||
that.uid
|
||||
//#endif
|
||||
//#ifndef APP
|
||||
url: '/pages/short_video/nvueSwiper/index?id=' + res.data
|
||||
.community_id + '&user=1&uid=' +
|
||||
that.uid
|
||||
//#endif
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/plantGrass/plant_detail/index?id=' + res.data
|
||||
.community_id + '&type=' + that
|
||||
.tabActive
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 将对象所有值为空
|
||||
* */
|
||||
/**
|
||||
* 将对象所有值为空
|
||||
* */
|
||||
that.formData = {
|
||||
image: [],
|
||||
content: "",
|
||||
topic_id: "",
|
||||
spu_id: [],
|
||||
video_link: "",
|
||||
}
|
||||
that.topicName = {}
|
||||
}, 1000);
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
}) : createPlantApi(value).then(res => {
|
||||
uni.hideLoading()
|
||||
that.$util.Tips({
|
||||
title: res.messge,
|
||||
icon: 'success'
|
||||
});
|
||||
setStorage('addPlant', '');
|
||||
setTimeout(function() {
|
||||
if (that.tabActive == 2) {
|
||||
uni.navigateTo({
|
||||
//#ifdef APP
|
||||
url: '/pages/short_video/appSwiper/index?id=' + res.data
|
||||
.community_id + '&user=1&uid=' +
|
||||
that.uid
|
||||
//#endif
|
||||
//#ifndef APP
|
||||
url: '/pages/short_video/nvueSwiper/index?id=' + res.data
|
||||
.community_id + '&user=1&uid=' +
|
||||
that.uid
|
||||
//#endif
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/plantGrass/plant_detail/index?id=' + res.data
|
||||
.community_id + '&type=' + that
|
||||
.tabActive
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 将对象所有值为空
|
||||
* */
|
||||
that.formData = {
|
||||
image: [],
|
||||
content: "",
|
||||
topic_id: "",
|
||||
spu_id: [],
|
||||
video_link: "",
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
}).catch(err => {
|
||||
// console.log('aaa', value)
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.crop_btn {
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
height: calc(90rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
height: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.release_content {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.release_tab {
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
border-bottom: 1rpx solid #E4E4E4;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 86rpx;
|
||||
|
||||
.tab_item {
|
||||
margin: 0 40rpx;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
position: relative;
|
||||
line-height: 86rpx;
|
||||
cursor: pointer;
|
||||
|
||||
&.on {
|
||||
color: #E93323;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 3rpx;
|
||||
background: #E93323;
|
||||
position: absolute;
|
||||
bottom: 2rpx;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
padding: 0 20rpx;
|
||||
|
||||
.release_item {
|
||||
background: #ffffff;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
}
|
||||
|
||||
.photo_count {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.input_photo .easy-loadimage,
|
||||
/deep/.input_photo uni-image,
|
||||
/deep/.input_photo image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx !important;
|
||||
}
|
||||
|
||||
.input_photo .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx !important;
|
||||
margin-right: 11rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 0 12rpx 0 12rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.iconfont {
|
||||
color: #ffffff;
|
||||
font-size: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cover_text {
|
||||
display: flex;
|
||||
width: 58rpx;
|
||||
height: 29rpx;
|
||||
background: #E93323;
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.loading-img {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.input_photo .pictrue {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.videoHover {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
>view {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background: #000000;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.iconfont {
|
||||
color: #ffffff;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-text {
|
||||
display: block;
|
||||
width: 180rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 18rpx;
|
||||
z-index: 13;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input_photo .add {
|
||||
background: #f6f6f6;
|
||||
color: #666666;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea textarea {
|
||||
font-size: 28rpx;
|
||||
padding-bottom: 38rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 400rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.textarea .placeholder {
|
||||
color: #BBBBBB;
|
||||
}
|
||||
|
||||
.release_item .item {
|
||||
height: 106rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
position: relative;
|
||||
font-size: 30rpx;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #333333;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #bbbbbb;
|
||||
|
||||
.select_count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-right: 15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.image,
|
||||
image,
|
||||
uni-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text1 {
|
||||
width: 308rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.text_name {
|
||||
color: var(--view-theme);
|
||||
padding: 5rpx 12rpx;
|
||||
background: var(--view-minorColor);
|
||||
border-radius: 23rpx;
|
||||
font-size: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.icon {
|
||||
color: var(--view-theme);
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 710rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background: var(--view-theme);
|
||||
border-radius: 43rpx;
|
||||
}
|
||||
|
||||
.release_btn {
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
.video-count {
|
||||
position: fixed;
|
||||
width: 600rpx;
|
||||
height: 500rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -300rpx;
|
||||
margin-top: -250rpx;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.videoLink {
|
||||
width: 600rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
351
pages/trading_hall/product_details/index.vue
Normal file
351
pages/trading_hall/product_details/index.vue
Normal file
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content_top">
|
||||
<view class="content_top-one">
|
||||
<view class="content_symbol">
|
||||
<image src="@/static/images/f.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="content_title">
|
||||
<view class="title_one">
|
||||
张三生产资料供销
|
||||
</view>
|
||||
<view class="title_two">
|
||||
100+人关注 100+销量
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_titimg">
|
||||
<image src="@/static/images/sym.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view view class="content_top-two">
|
||||
<view class="price">
|
||||
￥100
|
||||
</view>
|
||||
|
||||
<view class="top-two_content">
|
||||
【新鲜上架】“新鲜摘下，美味到你口，我们为您带来最新鲜的蔬菜，从田地到餐桌，健康从这里开始！快来选择你的绿色盛宴吧！"
|
||||
</view>
|
||||
<view class="top-two_img">
|
||||
<view class="">
|
||||
<image src="../../annex/static/vipBg.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">
|
||||
<image src="../../annex/static/vipBg.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">
|
||||
<image src="../../annex/static/vipBg.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content_middle">
|
||||
<view class="middle-one">
|
||||
<view class="midding-img">
|
||||
<image src="@/static/images/bg2.png" mode=""></image>
|
||||
</view>
|
||||
<view class="middle-one_text">
|
||||
<view class="one_text_a">
|
||||
良品铺子肉松饼1000g/箱 面包糕...
|
||||
</view>
|
||||
<view class="one_text_b">
|
||||
￥100
|
||||
</view>
|
||||
<view class="one_text_c">
|
||||
|
||||
<view class="">
|
||||
采购价:¥34.90
|
||||
</view>
|
||||
<view class="">
|
||||
数量:100个
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="middle-one">
|
||||
<view class="midding-img">
|
||||
<image src="@/static/images/bg2.png" mode=""></image>
|
||||
</view>
|
||||
<view class="middle-one_text">
|
||||
<view class="one_text_a">
|
||||
良品铺子肉松饼1000g/箱 面包糕...
|
||||
</view>
|
||||
<view class="one_text_b">
|
||||
￥100
|
||||
</view>
|
||||
<view class="one_text_c">
|
||||
|
||||
<view class="">
|
||||
采购价:¥34.90
|
||||
</view>
|
||||
<view class="">
|
||||
数量:100个
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content_bootm">
|
||||
<view class="content_bootm_txt">
|
||||
查看TA提到的宝贝(2)
|
||||
</view>
|
||||
|
||||
<view class="content_bootm_one">
|
||||
<view class="bootm_oneimg">
|
||||
<image src="@/static/images/bg2.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">
|
||||
良品铺子肉松饼1000g/箱 面包糕...
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_bootm_one">
|
||||
<view class="bootm_oneimg">
|
||||
<image src="@/static/images/bg2.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">
|
||||
良品铺子肉松饼1000g/箱 面包糕...
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pay">
|
||||
<view class="pay_tilte-a">
|
||||
合计: <span>￥200.00</span>
|
||||
</view>
|
||||
<view class="pay_tilte-b">提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {}
|
||||
|
||||
.content_top {
|
||||
padding: 21rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
.content_top-one {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #CCCCCC;
|
||||
.content_symbol {
|
||||
width: 81rpx;
|
||||
height: 81rpx;
|
||||
|
||||
image {
|
||||
width: 81rpx;
|
||||
height: 81rpx;
|
||||
}
|
||||
|
||||
margin-bottom: 21rpx;
|
||||
}
|
||||
|
||||
.content_title {
|
||||
margin-left: 21rpx;
|
||||
|
||||
.title_one {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title_two {
|
||||
font-size: 25rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.content_titimg {
|
||||
width: 136rpx;
|
||||
height: 64rpx;
|
||||
margin-top: -10rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
image {
|
||||
width: 136rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_top-two {
|
||||
.price {
|
||||
font-size: 46rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221
|
||||
}
|
||||
|
||||
.top-two_content {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-top: 21rpx;
|
||||
}
|
||||
|
||||
.top-two_img {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
view {
|
||||
width: 217rpx;
|
||||
height: 217rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 217rpx;
|
||||
height: 217rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_middle {
|
||||
|
||||
.middle-one {
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
margin-top: 28rpx;
|
||||
padding: 21rpx 0;
|
||||
|
||||
.midding-img {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
margin-left: 24rpx;
|
||||
margin-right: 21rpx;
|
||||
|
||||
image {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.middle-one_text {
|
||||
.one_text_a {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.one_text_b {
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
margin-top: 11rpx;
|
||||
}
|
||||
|
||||
.one_text_c {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content_bootm {
|
||||
|
||||
margin-bottom: 150rpx;
|
||||
|
||||
.content_bootm_txt {
|
||||
margin-top: 42rpx;
|
||||
|
||||
padding-left: 28rpx;
|
||||
}
|
||||
|
||||
.content_bootm_one {
|
||||
height: 112rpx;
|
||||
line-height: 112rpx;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
margin-top: 21rpx;
|
||||
|
||||
.bootm_oneimg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: auto 0;
|
||||
margin-left: 28rpx;
|
||||
margin-right: 21rpx;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pay {
|
||||
width: 100%;
|
||||
height: 121rpx;
|
||||
line-height:121rpx;
|
||||
background: #FFFFFF;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 28rpx;
|
||||
.pay_tilte-a{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
span{
|
||||
font-size: 42rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
}
|
||||
}
|
||||
.pay_tilte-b{
|
||||
width: 238rpx;
|
||||
height: 74rpx;
|
||||
line-height:74rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 37rpx 37rpx 37rpx 37rpx;
|
||||
opacity: 1;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,460 +1,461 @@
|
||||
<template>
|
||||
<view class="center">
|
||||
<view class="top">
|
||||
<view class="top-header">
|
||||
<view class="search">
|
||||
<view class="search-content acea-row row-middle">
|
||||
<text class="iconfont icon-sousuo"></text>
|
||||
<input v-model="where.store_name" confirm-type="search" placeholder="请输收货人手机号或订单号搜索" class="input"
|
||||
@confirm="handleSearch" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bgc_img" v-if="this.shopList == ![]">
|
||||
<image src="@/static/images/empty-box.png" mode="widthFix"></image>
|
||||
<view class="txt">
|
||||
暂无商品订单~
|
||||
</view>
|
||||
</view>
|
||||
<view class='list' v-else>
|
||||
<block>
|
||||
<view class='item' v-for="(item,index) in shopList" :key="index">
|
||||
<view >
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class="acea-row row-middle left-wrapper">
|
||||
{{item.merchant.mer_name}}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<block>
|
||||
<view class="_order">
|
||||
订单号: {{item.order_sn}}
|
||||
</view>
|
||||
<view class='item-info acea-row row-between row-top' v-for="(items,indexs) in item.orderProduct" :key="indexs">
|
||||
<view class='pictrue'>
|
||||
<image :src="items.cart_info.product.image">
|
||||
</image>
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='_left'>
|
||||
{{items.cart_info.product.store_name}}
|
||||
<view class="">
|
||||
{{items.cart_info.productAttr.sku}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view class='name'>￥{{items.cart_info.productAttr.price}}</view>
|
||||
<view class='name'>x {{items.product_num}}</view>
|
||||
</view>
|
||||
<!-- <view class="totalfooter">
|
||||
<view class="center">
|
||||
<view class="top">
|
||||
<view class="top-header">
|
||||
<view class="search">
|
||||
<view class="search-content acea-row row-middle">
|
||||
<text class="iconfont icon-sousuo"></text>
|
||||
<input v-model="where.store_name" confirm-type="search" placeholder="请输收货人手机号或订单号搜索"
|
||||
class="input" @confirm="handleSearch" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bgc_img" v-if="this.shopList == ![]">
|
||||
<image src="@/static/images/empty-box.png" mode="widthFix"></image>
|
||||
<view class="txt">
|
||||
暂无商品订单~
|
||||
</view>
|
||||
</view>
|
||||
<view class='list' v-else>
|
||||
<block>
|
||||
<view class='item' v-for="(item,index) in shopList" :key="index">
|
||||
<view>
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class="acea-row row-middle left-wrapper">
|
||||
{{item.merchant.mer_name}}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<block>
|
||||
<view class="_order">
|
||||
订单号: {{item.order_sn}}
|
||||
</view>
|
||||
<view class='item-info acea-row row-between row-top'
|
||||
v-for="(items,indexs) in item.orderProduct" :key="indexs">
|
||||
<view class='pictrue'>
|
||||
<image :src="items.cart_info.product.image">
|
||||
</image>
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='_left'>
|
||||
{{items.cart_info.product.store_name}}
|
||||
<view class="">
|
||||
{{items.cart_info.productAttr.sku}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view class='name'>￥{{items.cart_info.productAttr.price}}</view>
|
||||
<view class='name'>x {{items.product_num}}</view>
|
||||
</view>
|
||||
<!-- <view class="totalfooter">
|
||||
<view class='bnt b-color' v-if="items.is_imported == 0 && item.orderProduct.length > 1"
|
||||
@click="importshop(items.order_id,items.product_id,items.product_sku)">
|
||||
立即导入</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="totalfooter">
|
||||
<view class='bnt b-color' v-if="item.orderProduct[indexs]"
|
||||
@click="importshop(item.order_id,item.orderProduct[indexs].product_id,item.orderProduct[indexs].product_sku)">
|
||||
立即导入</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='totalPrice'>s
|
||||
共{{item.orderProduct.length}}件商品，总金额
|
||||
<text class='money'>￥{{item.pay_price}}</text>
|
||||
</view>
|
||||
<!-- <view class="totalfooter">
|
||||
</view>
|
||||
<view class="totalfooter">
|
||||
<view class='bnt b-color' v-if="!item.orderProduct[indexs]"
|
||||
@click="importshop(item.order_id,item.orderProduct[indexs].product_id,item.orderProduct[indexs].product_sku)">
|
||||
立即导入</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='totalPrice'>
|
||||
共{{item.orderProduct.length}}件商品，总金额
|
||||
<text class='money'>￥{{item.pay_price}}</text>
|
||||
</view>
|
||||
<!-- <view class="totalfooter">
|
||||
<view class='bnt b-color' v-if="item.orderProduct[index]"
|
||||
@click="importshop(item.order_id,item.orderProduct[index].product_id,item.orderProduct[index].cart_info.productAttr.product_sku)">
|
||||
立即导入</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<u-popup :show="show" @close="close" mode="center" bgColor='transparent'>
|
||||
<image src="@/static/images/xianshang.png" mode="widthFix"></image>
|
||||
<view class="popen">
|
||||
<h4>{{title}}</h4>
|
||||
<view class="shuru">
|
||||
点击确定，返回商品管理
|
||||
</view>
|
||||
<view class="btn">
|
||||
<button class="btn_l" @click="closeasd()">取消</button>
|
||||
<button class="btn_r" @click="getback()">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<u-popup :show="show" @close="close" mode="center" bgColor='transparent'>
|
||||
<image src="@/static/images/xianshang.png" mode="widthFix"></image>
|
||||
<view class="popen">
|
||||
<h4>{{title}}</h4>
|
||||
<view class="shuru">
|
||||
点击确定，返回商品管理
|
||||
</view>
|
||||
<view class="btn">
|
||||
<button class="btn_l" @click="closeasd()">取消</button>
|
||||
<button class="btn_r" @click="getback()">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPreviewProDetail,
|
||||
} from '@/api/store.js'
|
||||
import {
|
||||
postImport
|
||||
} from '@/api/product.js'
|
||||
import {
|
||||
getOrderList
|
||||
} from '@/api/order.js'
|
||||
import Loading from '@/components/Loading/index'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopList: [],
|
||||
shopinfo: {},
|
||||
mer_id: '',
|
||||
keyword: '',
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
status: 20,
|
||||
product_type: 98,
|
||||
store_name: '',
|
||||
},
|
||||
data: {
|
||||
product_id: '',
|
||||
unique: "",
|
||||
order_id: '',
|
||||
order_product_id: '',
|
||||
order_unique: ''
|
||||
},
|
||||
show: false,
|
||||
title: '',
|
||||
loaded: false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option);
|
||||
this.mer_id = option.mer_id
|
||||
this.getList();
|
||||
this.data.product_id = option.product_id
|
||||
this.data.unique = option.unique
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
let that = this
|
||||
that.loaded = false;
|
||||
that.where.page = 1;
|
||||
that.shopList = [];
|
||||
getOrderList(that.where, that.mer_id).then(res => {
|
||||
console.log(res);
|
||||
that.shopList = res.data.list
|
||||
console.log(that.shopList);
|
||||
})
|
||||
},
|
||||
getList: function() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
getOrderList(this.where, this.mer_id).then(res => {
|
||||
console.log(res);
|
||||
this.shopList = res.data.list
|
||||
console.log(this.shopList);
|
||||
})
|
||||
},
|
||||
importshop(order_id, product_id, unique) {
|
||||
this.data.order_id = order_id
|
||||
this.data.order_product_id = product_id
|
||||
this.data.order_unique = unique
|
||||
console.log(this.data)
|
||||
this.show = true
|
||||
postImport(this.mer_id, this.data).then(res => {
|
||||
console.log(res);
|
||||
this.title = res.message
|
||||
this.$util.Tips({
|
||||
title: res.message
|
||||
})
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
import {
|
||||
getPreviewProDetail,
|
||||
} from '@/api/store.js'
|
||||
import {
|
||||
postImport
|
||||
} from '@/api/product.js'
|
||||
import {
|
||||
getOrderList
|
||||
} from '@/api/order.js'
|
||||
import Loading from '@/components/Loading/index'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopList: [],
|
||||
shopinfo: {},
|
||||
mer_id: '',
|
||||
keyword: '',
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
status: 20,
|
||||
product_type: 98,
|
||||
store_name: '',
|
||||
},
|
||||
data: {
|
||||
product_id: '',
|
||||
unique: "",
|
||||
order_id: '',
|
||||
order_product_id: '',
|
||||
order_unique: ''
|
||||
},
|
||||
show: false,
|
||||
title: '',
|
||||
loaded: false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
// console.log(option);
|
||||
this.mer_id = option.mer_id
|
||||
this.getList();
|
||||
this.data.product_id = option.product_id
|
||||
this.data.unique = option.unique
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
let that = this
|
||||
that.loaded = false;
|
||||
that.where.page = 1;
|
||||
that.shopList = [];
|
||||
getOrderList(that.where, that.mer_id).then(res => {
|
||||
console.log(res);
|
||||
that.shopList = res.data.list
|
||||
console.log(that.shopList);
|
||||
})
|
||||
},
|
||||
getList: function() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
getOrderList(this.where, this.mer_id).then(res => {
|
||||
console.log(res);
|
||||
this.shopList = res.data.list
|
||||
console.log(this.shopList);
|
||||
})
|
||||
},
|
||||
importshop(order_id, product_id, unique) {
|
||||
this.data.order_id = order_id
|
||||
this.data.order_product_id = product_id
|
||||
this.data.order_unique = unique
|
||||
console.log(this.data)
|
||||
this.show = true
|
||||
postImport(this.mer_id, this.data).then(res => {
|
||||
console.log(res);
|
||||
this.title = res.message
|
||||
this.$util.Tips({
|
||||
title: res.message
|
||||
})
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
|
||||
},
|
||||
closeasd: function() {
|
||||
this.show = false
|
||||
getOrderList(this.where, this.mer_id).then(res => {
|
||||
console.log(res);
|
||||
this.shopList = res.data.list
|
||||
console.log(this.shopList);
|
||||
})
|
||||
},
|
||||
getback() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
closeasd: function() {
|
||||
this.show = false
|
||||
getOrderList(this.where, this.mer_id).then(res => {
|
||||
console.log(res);
|
||||
this.shopList = res.data.list
|
||||
console.log(this.shopList);
|
||||
})
|
||||
},
|
||||
getback() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top {
|
||||
background-color: red;
|
||||
.top {
|
||||
background-color: red;
|
||||
|
||||
.top-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
.top-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.search {
|
||||
padding: 17rpx 30rpx;
|
||||
.search {
|
||||
padding: 17rpx 30rpx;
|
||||
|
||||
.search-content {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #F5F5F5;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.search-content {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #F5F5F5;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.input-placeholder {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bgc_img {
|
||||
position: absolute;
|
||||
top: 30vh;
|
||||
left: 10vw;
|
||||
.bgc_img {
|
||||
position: absolute;
|
||||
top: 30vh;
|
||||
left: 10vw;
|
||||
|
||||
image {
|
||||
width: 300px;
|
||||
}
|
||||
image {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.txt {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 690rpx;
|
||||
margin: 50px auto 0 auto;
|
||||
.list {
|
||||
width: 690rpx;
|
||||
margin: 50px auto 0 auto;
|
||||
|
||||
.title {
|
||||
height: 84rpx;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #282828;
|
||||
.title {
|
||||
height: 84rpx;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #282828;
|
||||
|
||||
.left-wrapper {
|
||||
.iconfont {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.left-wrapper {
|
||||
.iconfont {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
.store-name {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.icon-xiangyou {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.icon-xiangyou {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
font-size: 24rpx;
|
||||
padding: 0 7rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
.sign {
|
||||
font-size: 24rpx;
|
||||
padding: 0 7rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
background-color: #fff;
|
||||
margin: 5px 0 5px 0;
|
||||
.item {
|
||||
background-color: #fff;
|
||||
margin: 5px 0 5px 0;
|
||||
|
||||
.item-info {
|
||||
padding: 0 30rpx;
|
||||
margin-top: 22rpx;
|
||||
.item-info {
|
||||
padding: 0 30rpx;
|
||||
margin-top: 22rpx;
|
||||
|
||||
.pictrue {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
.pictrue {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 486rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.text {
|
||||
width: 486rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
._left {
|
||||
width: 300rpx;
|
||||
color: #282828;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
._left {
|
||||
width: 300rpx;
|
||||
color: #282828;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100rpx;
|
||||
color: #282828;
|
||||
.name {
|
||||
width: 100rpx;
|
||||
color: #282828;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
text-align: right;
|
||||
float: right;
|
||||
.money {
|
||||
text-align: right;
|
||||
float: right;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.event_name {
|
||||
display: inline-block;
|
||||
margin-right: 9rpx;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 0 8rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.event_name {
|
||||
display: inline-block;
|
||||
margin-right: 9rpx;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 0 8rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.event_ship {
|
||||
font-size: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.event_ship {
|
||||
font-size: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
._order {
|
||||
font-size: 28rpx;
|
||||
margin: 5px 0 0 15px;
|
||||
}
|
||||
._order {
|
||||
font-size: 28rpx;
|
||||
margin: 5px 0 0 15px;
|
||||
}
|
||||
|
||||
.totalPrice {
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
text-align: right;
|
||||
margin: 27rpx 0 0 30rpx;
|
||||
padding: 0 30rpx 30rpx 0;
|
||||
.totalPrice {
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
text-align: right;
|
||||
margin: 27rpx 0 0 30rpx;
|
||||
padding: 0 30rpx 30rpx 0;
|
||||
|
||||
|
||||
.money {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: rgb(233, 51, 35);
|
||||
}
|
||||
.money {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: rgb(233, 51, 35);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.totalfooter {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
.totalfooter {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
|
||||
.bnt {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 176rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50rpx;
|
||||
font-size: 27rpx;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
color: white;
|
||||
margin-left: 70%;
|
||||
margin-top: 5px;
|
||||
.bnt {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 176rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50rpx;
|
||||
font-size: 27rpx;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
color: white;
|
||||
margin-left: 70%;
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 107rpx;
|
||||
padding: 0 30rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
.bottom {
|
||||
height: 107rpx;
|
||||
padding: 0 30rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.event_price {
|
||||
margin: 0 0 50rpx 120rpx;
|
||||
}
|
||||
}
|
||||
.event_price {
|
||||
margin: 0 0 50rpx 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popen {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
.popen {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.guige {
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
.guige {
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
|
||||
.shuru {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
.shuru {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
|
||||
.btn_l {
|
||||
padding: 5px;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn_l {
|
||||
padding: 5px;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn_r {
|
||||
width: 100px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 27px 27px 27px 27px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn_r {
|
||||
width: 100px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 27px 27px 27px 27px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -650,6 +650,7 @@
|
||||
groupOrderList({
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
product_type:0
|
||||
}).then(res => {
|
||||
that.isReady = true;
|
||||
let list = res.data.list || [];
|
||||
@ -670,6 +671,7 @@
|
||||
status: that.orderStatus - 1,
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
product_type:0
|
||||
}).then(res => {
|
||||
let list = res.data.list || [];
|
||||
let loadend = list.length < that.limit;
|
||||
|
||||
@ -651,6 +651,7 @@
|
||||
groupOrderList({
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
|
||||
}).then(res => {
|
||||
that.isReady = true;
|
||||
let list = res.data.list || [];
|
||||
@ -671,6 +672,7 @@
|
||||
status: that.orderStatus - 1,
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
product_type:98
|
||||
}).then(res => {
|
||||
let list = res.data.list || [];
|
||||
let loadend = list.length < that.limit;
|
||||
|
||||
37
pages/users/releaseOrdermanagement/index.vue
Normal file
37
pages/users/releaseOrdermanagement/index.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
list:[{
|
||||
name:在售
|
||||
},
|
||||
{
|
||||
name:已售出
|
||||
},
|
||||
{
|
||||
name:待审核
|
||||
},
|
||||
{
|
||||
name:审核未通过
|
||||
},
|
||||
{
|
||||
name:在售
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,208 +1,371 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="top-header">
|
||||
<view class="search">
|
||||
<view class="search-content acea-row row-middle">
|
||||
<text class="iconfont icon-sousuo"></text>
|
||||
<input v-model="where.keyword" confirm-type="search" placeholder="请输收货人手机号或订单号搜索" class="input"
|
||||
@confirm="handleSearch" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recom">
|
||||
<view class="recom_bnt">
|
||||
<rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event)">
|
||||
{{this.recomname}}
|
||||
</rudon-rowMenuDotDotDot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="type_switch">
|
||||
<view class="recom_mend">
|
||||
推荐
|
||||
</view>
|
||||
</view>
|
||||
<view class="type_switch">
|
||||
<view class="recom_mend">
|
||||
调货
|
||||
</view>
|
||||
</view>
|
||||
<view class="type_switch">
|
||||
<view class="recom_mend">
|
||||
打折专区
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<image class="shopimg" src="@/static/images/2-002.png" mode="widthFix"></image>
|
||||
<view class="item_text">
|
||||
<span>调货</span> 夹岸数范德萨范德萨衣服上的
|
||||
</view>
|
||||
<view class="item_prices">
|
||||
啊沙发上
|
||||
</view>
|
||||
<view class="item_name">
|
||||
<image class="avater" src="../user_grade/images/suozi.png" mode="widthFix"></image>
|
||||
<view class="item_name_text">
|
||||
啊沙发上
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="top-header">
|
||||
<view class="search">
|
||||
<view class="search-content acea-row row-middle">
|
||||
<text class="iconfont icon-sousuo"></text>
|
||||
<input v-model="where.keyword" confirm-type="search" placeholder="请输入关键字" class="input"
|
||||
@confirm="handleSearch" />
|
||||
<view class="search_btn">
|
||||
<image src="@/static/images/serchbtn.png" mode="aspectFill"></image>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recom">
|
||||
<view class="recom_bnt">
|
||||
<rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event)">
|
||||
{{this.recomname}}
|
||||
<view class="recom_sym">
|
||||
<image src='@/static/images/arrow-bottom.png' mode="aspectFit"></image>
|
||||
</view>
|
||||
</rudon-rowMenuDotDotDot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="type_switch">
|
||||
<view class="recom_mend" v-for="(item,i) in options" :key="i" :class="i==num?'tradcolor':''"
|
||||
@click="btntap(i)">
|
||||
{{item.text}}
|
||||
|
||||
<view :class="i==num?'tradline':''"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for='(item,index) in datatlist' :key='index' @click="shopping">
|
||||
<image class="shopimg" :src="item.img" mode="aspectFit"></image>
|
||||
<view class="item_text">
|
||||
<span>{{item.txt}}</span> {{item.name}}
|
||||
</view>
|
||||
<view class="item_prices">
|
||||
<span>￥</span>{{item.price}}
|
||||
</view>
|
||||
<view class="item_name">
|
||||
<image class="avater" :src="item.img1" mode="aspectFit"></image>
|
||||
<view class="item_name_text">
|
||||
{{item.adess}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tardimg_add" @click="open">
|
||||
<!-- <img src="@/static/images/trad-add.png" mode="widthFix" alt=""> -->
|
||||
<image src="@/static/images/trad-add.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
<release :isShow='visible' :bottom='true' @close="closeMadle" @cancel="cancel" @confirm="confirm"></release>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { methods } from '../../../uni_modules/uview-ui/libs/mixin/mixin'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
status: 20,
|
||||
product_type: 98,
|
||||
keyword: '',
|
||||
},
|
||||
options: [{
|
||||
value: '0',
|
||||
text: '推荐'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
text: '调货'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
text: '打折专区'
|
||||
}
|
||||
],
|
||||
recomname: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
menuAction(action, rowId) {
|
||||
console.log(action);
|
||||
// 忽略初始化时的传入的空操作
|
||||
if (action === '') {
|
||||
this.recomname = this.options[0].text
|
||||
} else {
|
||||
this.recomname = this.options[action].text
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
import {
|
||||
methods
|
||||
} from '../../../uni_modules/uview-ui/libs/mixin/mixin'
|
||||
import release from '@/components/release/release.vue';
|
||||
export default {
|
||||
components: {
|
||||
release
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
status: 20,
|
||||
product_type: 98,
|
||||
keyword: '',
|
||||
|
||||
},
|
||||
visible: false,
|
||||
num: 0,
|
||||
options: [{
|
||||
value: '0',
|
||||
text: '推荐'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
text: '调货'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
text: '打折专区'
|
||||
}
|
||||
],
|
||||
datatlist: [{
|
||||
img: require('@/static/images/2-002.png'),
|
||||
txt: "调货",
|
||||
name: '焦糖山核桃味瓜子90g',
|
||||
price: '25.00',
|
||||
// ../user_grade/images/suozi.png
|
||||
img1: require('@/static/images/2-002.png'),
|
||||
adess: '张三生活超市'
|
||||
|
||||
}, {
|
||||
img: require('@/static/images/2-002.png'),
|
||||
txt: "委托销售",
|
||||
name: '焦糖山核桃味瓜子90g',
|
||||
price: '25.00',
|
||||
// ../user_grade/images/suozi.png
|
||||
img1: require('@/static/images/2-002.png'),
|
||||
adess: '张三生活超市'
|
||||
|
||||
}, {
|
||||
img: require('@/static/images/2-002.png'),
|
||||
txt: "打折专区",
|
||||
name: '焦糖山核桃味瓜子90g',
|
||||
price: '25.00',
|
||||
// ../user_grade/images/suozi.png
|
||||
img1: require('@/static/images/2-002.png'),
|
||||
adess: '张三生活超市'
|
||||
|
||||
}],
|
||||
recomname: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
btntap(index) {
|
||||
this.num = index
|
||||
},
|
||||
shopping(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/trading_hall/product_details/index'
|
||||
})
|
||||
},
|
||||
open() {
|
||||
|
||||
this.visible = true
|
||||
|
||||
},
|
||||
closeMadle() {
|
||||
this.visible = false
|
||||
|
||||
},
|
||||
confirm() {
|
||||
// 这里调用接口执行点击确定后的操作并关闭弹窗
|
||||
console.log('点击了确认按钮')
|
||||
this.visible = false
|
||||
},
|
||||
cancel() {
|
||||
// 点击了取消按钮直接关闭弹窗
|
||||
console.log('点击了取消按钮')
|
||||
this.visible = false
|
||||
},
|
||||
menuAction(action, rowId) {
|
||||
console.log(action);
|
||||
// 忽略初始化时的传入的空操作
|
||||
if (action === '') {
|
||||
this.recomname = this.options[0].text
|
||||
} else {
|
||||
this.recomname = this.options[action].text
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
.top-header {
|
||||
z-index: 9999;
|
||||
width: 80%;
|
||||
background-color: #fff;
|
||||
.top-header {
|
||||
|
||||
.search {
|
||||
padding: 17rpx 30rpx;
|
||||
width: 80%;
|
||||
|
||||
.search-content {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #F5F5F5;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.search {
|
||||
padding: 17rpx 30rpx;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.search-content {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
padding-left: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #F5F5F5;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-placeholder {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.recom {
|
||||
width: 78px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #F84221;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.recom_bnt {}
|
||||
}
|
||||
}
|
||||
.search_btn {
|
||||
width: 98rpx;
|
||||
height: 60rpx;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.item {
|
||||
width: 45%;
|
||||
margin: 9px;
|
||||
image {
|
||||
width: 98rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopimg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item_text {
|
||||
width: 100%;
|
||||
padding: 15px 10px 15px 10px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
margin: 2px;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 4px 0px 4px 0px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_prices {
|
||||
font-size: 18px;
|
||||
color: #F84221;
|
||||
padding-left: 15px;
|
||||
border-bottom: 1px solid #707070;
|
||||
}
|
||||
.recom {
|
||||
width: 137rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #F84221;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.item_name {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.recom_bnt {
|
||||
font-size: 32rpx;
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
color: #F84221;
|
||||
|
||||
.avater {
|
||||
margin: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.recom_sym {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 0rpx;
|
||||
image{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.type_switch {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-top: 17rpx;
|
||||
font-size: 18px;
|
||||
background-color: #fff;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.tradcolor {
|
||||
color: #F84221;
|
||||
}
|
||||
|
||||
.tradline {
|
||||
width: 26rpx;
|
||||
opacity: 1;
|
||||
border: 2rpx solid #F84221;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tardimg_add {
|
||||
position: absolute;
|
||||
bottom: 193rpx;
|
||||
right: 0rpx;
|
||||
position: fixed;
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
|
||||
image {
|
||||
width: 176rpx;
|
||||
height:176rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.item {
|
||||
width: 336rpx;
|
||||
height: 561rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 21rpx;
|
||||
margin-left: 25rpx;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
|
||||
.shopimg {
|
||||
width: 336rpx;
|
||||
height: 314rpx
|
||||
}
|
||||
|
||||
.item_text {
|
||||
width: 100%;
|
||||
padding: 15px 10px 15px 10px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
height: 35rpx;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
margin: 2px;
|
||||
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
||||
border-radius: 7px 0px 7px 0px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item_prices {
|
||||
font-size: 18px;
|
||||
color: #F84221;
|
||||
padding-left: 15px;
|
||||
border-bottom: 1px solid #707070;
|
||||
}
|
||||
|
||||
.item_name {
|
||||
width: 100%;
|
||||
padding-left: 15rpx;
|
||||
display: flex;
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
|
||||
.avater {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 19rpx;
|
||||
margin-right:10rpx ;
|
||||
image{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
.item_name_text{
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -17,22 +17,33 @@
|
||||
<view class='name'>所在地区</view>
|
||||
<view class="region">
|
||||
<view class="region_count" @click="changeRegion">
|
||||
<text v-if="!addressInfo.length" style="color:#cdcdcd;">请选择地址</text>
|
||||
<text v-if="!addressInfo.length" style="color:#cdcdcd;">请选择地区</text>
|
||||
<text v-else>{{addressText}}</text>
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view class='name'>所在村队</view>
|
||||
<view class="region">
|
||||
<view class="region_count" @click="changevillage">
|
||||
<text v-if="!villageInfo.length" style="color:#cdcdcd;">请选择村队</text>
|
||||
<text v-else>{{villageText}}</text>
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view class='name'>详细地址</view>
|
||||
<input type='text' class="location-input" placeholder='请填写具体地址' name='detail'
|
||||
placeholder-class='placeholder' v-model="userAddress.detail"></input>
|
||||
<view class="location" @click="selfLocation">
|
||||
<!--<view class="location" @click="selfLocation">
|
||||
<text class="iconfont icon-chakanditu"></text>
|
||||
<br>
|
||||
定位
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@ -54,6 +65,9 @@
|
||||
</form>
|
||||
<areaWindow ref="areaWindow" :display="display" :address="addressInfo" @submit="OnChangeAddress"
|
||||
@changeClose="changeClose"></areaWindow>
|
||||
<villageTeam ref="villageTeam" :display="display_one" :address="villageInfo" :villageaddress="list"
|
||||
@submit="OnChangevAddress" @changeClose="changevClose"></villageTeam>
|
||||
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||||
</view>
|
||||
</template>
|
||||
@ -80,6 +94,7 @@
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import areaWindow from '@/components/areaWindow';
|
||||
import villageTeam from '@/components/villageTeam/villageTeam.vue';
|
||||
import {
|
||||
getGeocoder
|
||||
} from '@/api/store.js';
|
||||
@ -88,6 +103,7 @@
|
||||
components: {
|
||||
areaWindow,
|
||||
authorize,
|
||||
villageTeam
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -107,7 +123,10 @@
|
||||
multiIndex: [0, 0, 0],
|
||||
cityId: 0,
|
||||
display: false,
|
||||
display_one: false,
|
||||
addressInfo: [],
|
||||
villageInfo: [],
|
||||
list: [],
|
||||
latitude: '',
|
||||
longitude: ''
|
||||
};
|
||||
@ -116,6 +135,9 @@
|
||||
...mapGetters(['isLogin', 'viewColor']),
|
||||
addressText() {
|
||||
return this.addressInfo.map(v => v.name).join('/');
|
||||
},
|
||||
villageText() {
|
||||
return this.villageInfo.map(v => v.name).join('/');
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@ -137,6 +159,11 @@
|
||||
methods: {
|
||||
OnChangeAddress(address) {
|
||||
this.addressInfo = address;
|
||||
this.list = address
|
||||
},
|
||||
OnChangevAddress(address) {
|
||||
this.villageInfo = address;
|
||||
console.log(this.villageInfo)
|
||||
},
|
||||
// 地址数据
|
||||
getCityList: function() {
|
||||
@ -148,10 +175,16 @@
|
||||
changeRegion() {
|
||||
this.display = true;
|
||||
},
|
||||
changevillage() {
|
||||
this.display_one = true;
|
||||
},
|
||||
// 关闭地址弹窗；
|
||||
changeClose: function() {
|
||||
this.display = false;
|
||||
},
|
||||
changevClose: function() {
|
||||
this.display_one = false;
|
||||
},
|
||||
// 授权回调
|
||||
onLoadFun: function() {
|
||||
this.isShowAuth = false;
|
||||
@ -171,11 +204,12 @@
|
||||
if (!this.address_id) return false;
|
||||
let that = this;
|
||||
getAddressDetail(this.address_id).then(res => {
|
||||
let region = [res.data.province, res.data.city, res.data.district];
|
||||
let region = [res.data.province, res.data.city, res.data.district, res.data.street, res.data.village];
|
||||
that.$set(that, 'userAddress', res.data);
|
||||
that.$set(that, 'region', region);
|
||||
that.city_id = res.data.city_id
|
||||
that.addressInfo = res.data.area
|
||||
that.addressInfo = res.data.areas
|
||||
that.villageInfo = [res.data.brigade]
|
||||
});
|
||||
},
|
||||
// 导入共享地址（小程序）
|
||||
@ -240,17 +274,14 @@
|
||||
// console.log(err);
|
||||
});
|
||||
},
|
||||
|
||||
selfLocation() {
|
||||
console.log(66)
|
||||
let self = this
|
||||
uni.showLoading({
|
||||
title: '定位中',
|
||||
mask: true,
|
||||
});
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
timeout: '10',
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
let latitude, longitude;
|
||||
latitude = res.latitude.toString();
|
||||
@ -316,13 +347,17 @@
|
||||
if (!that.addressInfo.length) return that.$util.Tips({
|
||||
title: '请选择所在地区'
|
||||
});
|
||||
if (!that.villageInfo.length) return that.$util.Tips({
|
||||
title: '请选择所在村队'
|
||||
});
|
||||
if (!value.detail) return that.$util.Tips({
|
||||
title: '请填写详细地址'
|
||||
});
|
||||
value.address_id = that.address_id;
|
||||
value.is_default = that.userAddress.is_default ? 1 : 0;
|
||||
value.area = that.addressInfo;
|
||||
|
||||
value.brigade=that.villageInfo[0]
|
||||
|
||||
uni.showLoading({
|
||||
title: '保存中',
|
||||
mask: true
|
||||
|
||||
BIN
static/images/arrow-bottom.png
Normal file
BIN
static/images/arrow-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 B |
BIN
static/images/discounts.png
Normal file
BIN
static/images/discounts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
static/images/season.png
Normal file
BIN
static/images/season.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/images/serchbtn.png
Normal file
BIN
static/images/serchbtn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/images/sym.png
Normal file
BIN
static/images/sym.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/images/trad-add.png
Normal file
BIN
static/images/trad-add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
static/images/trad-close.png
Normal file
BIN
static/images/trad-close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
18
uni_modules/uni-share/changelog.md
Normal file
18
uni_modules/uni-share/changelog.md
Normal file
@ -0,0 +1,18 @@
|
||||
## 2.0.2（2021-12-16）
|
||||
修复在某些情况下报：`Cannot read property 'hide' of undefined`的问题
|
||||
## 2.0.1（2021-11-29）
|
||||
修改错误的scene值WXSenceTimeline(分享到朋友圈)更正为WXSceneTimeline
|
||||
## 2.0.0（2021-10-14）
|
||||
支持监听返回操作(如：物理返回，全面屏手机侧滑)关闭分享弹窗
|
||||
## 1.0.6（2021-08-25）
|
||||
兼容vue3
|
||||
## 1.0.5（2021-08-05）
|
||||
优化代码实现，修改原来用`eval()`函数实现的逻辑
|
||||
## 1.0.4（2021-06-07）
|
||||
为符合苹果应用市场的审核，只显示存在对应的分享客户端的选项。如：配置包含微信分享，但是用户手机上并没有安装微信，就不显示微信分享。
|
||||
## 1.0.2（2021-05-06）
|
||||
修复错误的提示：“打包时未添加oauth模块”
|
||||
## 1.0.1（2021-04-30）
|
||||
新增完整示例
|
||||
## 1.0.0（2021-04-28）
|
||||
第1版发布
|
||||
204
uni_modules/uni-share/js_sdk/uni-image-menu.js
Normal file
204
uni_modules/uni-share/js_sdk/uni-image-menu.js
Normal file
@ -0,0 +1,204 @@
|
||||
var nvMask, nvImageMenu;
|
||||
class NvImageMenu {
|
||||
constructor(arg) {
|
||||
this.isShow = false
|
||||
}
|
||||
show({
|
||||
list,
|
||||
cancelText
|
||||
}, callback) {
|
||||
if (!list) {
|
||||
list = [{
|
||||
"img": "/static/sharemenu/wechatfriend.png",
|
||||
"text": "图标文字"
|
||||
}]
|
||||
}
|
||||
//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
|
||||
var screenWidth = plus.screen.resolutionWidth
|
||||
//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
|
||||
//图标下的按钮文字距离图标5像素，文字大小12像素
|
||||
//底部取消按钮高度固定为44px
|
||||
//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
|
||||
var margin = 20,
|
||||
iconWidth = 60,
|
||||
icontextSpace = 5,
|
||||
textHeight = 12
|
||||
var left1 = margin / 360 * screenWidth
|
||||
var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
|
||||
if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
|
||||
margin = 15
|
||||
iconWidth = 40
|
||||
left1 = margin / 360 * screenWidth
|
||||
iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
|
||||
}
|
||||
var left2 = left1 + iconWidth + iconSpace
|
||||
var left3 = left1 + (iconWidth + iconSpace) * 2
|
||||
var left4 = left1 + (iconWidth + iconSpace) * 3
|
||||
var top1 = left1
|
||||
var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
|
||||
|
||||
const TOP = {
|
||||
top1,
|
||||
top2
|
||||
},
|
||||
LEFT = {
|
||||
left1,
|
||||
left2,
|
||||
left3,
|
||||
left4
|
||||
};
|
||||
|
||||
nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0.2)'
|
||||
});
|
||||
nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
|
||||
bottom: '0px',
|
||||
left: '0px',
|
||||
height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 +
|
||||
'px', //'264px',
|
||||
width: '100%',
|
||||
backgroundColor: 'rgb(255,255,255)'
|
||||
});
|
||||
nvMask.addEventListener("click", () => { //处理遮罩层点击
|
||||
// console.log('处理遮罩层点击');
|
||||
this.hide()
|
||||
callback({
|
||||
event: "clickMask"
|
||||
})
|
||||
})
|
||||
let myList = []
|
||||
list.forEach((item, i) => {
|
||||
myList.push({
|
||||
tag: 'img',
|
||||
src: item.img,
|
||||
position: {
|
||||
top: TOP['top' + (parseInt(i / 4) + 1)],
|
||||
left: LEFT['left' + (1 + i % 4)],
|
||||
width: iconWidth,
|
||||
height: iconWidth
|
||||
}
|
||||
})
|
||||
myList.push({
|
||||
tag: 'font',
|
||||
text: item.text,
|
||||
textStyles: {
|
||||
size: textHeight
|
||||
},
|
||||
position: {
|
||||
top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace,
|
||||
left: LEFT['left' + (1 + i % 4)],
|
||||
width: iconWidth,
|
||||
height: textHeight
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//绘制底部图标菜单的内容
|
||||
nvImageMenu.draw([{
|
||||
tag: 'rect', //菜单顶部的分割灰线
|
||||
color: '#e7e7e7',
|
||||
position: {
|
||||
top: '0px',
|
||||
height: '1px'
|
||||
}
|
||||
},
|
||||
{
|
||||
tag: 'font',
|
||||
text: cancelText, //底部取消按钮的文字
|
||||
textStyles: {
|
||||
size: '14px'
|
||||
},
|
||||
position: {
|
||||
bottom: '0px',
|
||||
height: '44px'
|
||||
}
|
||||
},
|
||||
{
|
||||
tag: 'rect', //底部取消按钮的顶部边线
|
||||
color: '#e7e7e7',
|
||||
position: {
|
||||
bottom: '45px',
|
||||
height: '1px'
|
||||
}
|
||||
},
|
||||
...myList
|
||||
])
|
||||
nvMask.show()
|
||||
nvImageMenu.show()
|
||||
// 开始动画
|
||||
/*
|
||||
plus.nativeObj.View.startAnimation({
|
||||
type: 'slide-in-bottom',
|
||||
duration: 300
|
||||
}, nvImageMenu, {}, function() {
|
||||
console.log('plus.nativeObj.View.startAnimation动画结束');
|
||||
// 关闭原生动画
|
||||
plus.nativeObj.View.clearAnimation();
|
||||
nvImageMenu.show()
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
this.isShow = true
|
||||
nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
|
||||
// console.log("click menu"+JSON.stringify(e));
|
||||
if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
|
||||
// callback({event:"clickCancelButton"})
|
||||
this.hide()
|
||||
} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
|
||||
//屏幕左右边缘5像素及菜单顶部5像素不处理点击
|
||||
} else { //点击了图标按钮
|
||||
var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
|
||||
var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
|
||||
var iCol = -1
|
||||
if (e.clientX < (left2 - (iconSpace / 2))) {
|
||||
iCol = 0
|
||||
} else if (e.clientX < (left3 - (iconSpace / 2))) {
|
||||
iCol = 1
|
||||
} else if (e.clientX < (left4 - (iconSpace / 2))) {
|
||||
iCol = 2
|
||||
} else {
|
||||
iCol = 3
|
||||
}
|
||||
if (iRow == 0) {
|
||||
iClickIndex = iCol
|
||||
} else {
|
||||
iClickIndex = iCol + 4
|
||||
}
|
||||
// console.log("点击按钮的序号: " + iClickIndex);
|
||||
// if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
|
||||
// }
|
||||
callback({
|
||||
event: "clickMenu",
|
||||
index: iClickIndex
|
||||
})
|
||||
}
|
||||
})
|
||||
/* nvImageMenu.addEventListener("touchstart", function(e) {
|
||||
if (e.screenY > (plus.screen.resolutionHeight - 44)) {
|
||||
//TODO 这里可以处理按下背景变灰的效果
|
||||
}
|
||||
})
|
||||
nvImageMenu.addEventListener("touchmove", function(e) {
|
||||
//TODO 这里可以处理按下背景变灰的效果
|
||||
if (e.screenY > plus.screen.resolutionHeight - 44) {}
|
||||
})
|
||||
nvImageMenu.addEventListener("touchend", function(e) {
|
||||
//TODO 这里可以处理释放背景恢复的效果
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this.isShow) {
|
||||
nvMask.hide()
|
||||
nvImageMenu.hide()
|
||||
this.isShow = false
|
||||
}
|
||||
}
|
||||
}
|
||||
export default NvImageMenu
|
||||
98
uni_modules/uni-share/js_sdk/uni-share.js
Normal file
98
uni_modules/uni-share/js_sdk/uni-share.js
Normal file
@ -0,0 +1,98 @@
|
||||
import UniImageMenu from './uni-image-menu.js';
|
||||
class UniShare extends UniImageMenu{
|
||||
constructor(arg) {
|
||||
super()
|
||||
this.isShow = super.isShow
|
||||
}
|
||||
async show(param, callback){
|
||||
var menus = []
|
||||
plus.share.getServices(services => { //只显示有服务的项目
|
||||
services = services.filter(item => item.nativeClient)
|
||||
let servicesList = services.map(e => e.id)
|
||||
param.menus.forEach(item => {
|
||||
if (servicesList.includes(item.share.provider) || typeof(item.share) == 'string') {
|
||||
menus.push(item)
|
||||
}
|
||||
})
|
||||
super.show({
|
||||
list: menus,
|
||||
cancelText: param.cancelText
|
||||
}, e => {
|
||||
callback(e)
|
||||
if(e.event == 'clickMenu'){
|
||||
if (typeof(menus[e.index]['share']) == 'string') {
|
||||
this[menus[e.index]['share']](param)
|
||||
} else {
|
||||
uni.share({
|
||||
...param.content,
|
||||
...menus[e.index].share,
|
||||
success: res=> {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
super.hide()
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
uni.showModal({
|
||||
content: JSON.stringify(err),
|
||||
showCancel: false,
|
||||
confirmText: "知道了"
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}, err => {
|
||||
uni.showModal({
|
||||
title: '获取服务供应商失败：' + JSON.stringify(err),
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
});
|
||||
console.error('获取服务供应商失败：' + JSON.stringify(err));
|
||||
})
|
||||
}
|
||||
hide(){
|
||||
super.hide()
|
||||
}
|
||||
copyurl(param) {
|
||||
console.log('copyurl',param);
|
||||
uni.setClipboardData({
|
||||
data: param.content.href,
|
||||
success: ()=>{
|
||||
console.log('success');
|
||||
uni.hideToast() //关闭自带的toast
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
super.hide();
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(err),
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 使用系统分享发送分享消息
|
||||
shareSystem(param) {
|
||||
console.log('shareSystem',param);
|
||||
plus.share.sendWithSystem({
|
||||
type: 'text',
|
||||
content: param.content.title + param.content.summary || '',
|
||||
href: param.content.href,
|
||||
}, (e)=> {
|
||||
console.log('分享成功');
|
||||
super.hide()
|
||||
}, (err)=> {
|
||||
console.log('分享失败：' + JSON.stringify(err));
|
||||
uni.showModal({
|
||||
title: '获取服务供应商失败：' + JSON.stringify(err),
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
export default UniShare
|
||||
80
uni_modules/uni-share/package.json
Normal file
80
uni_modules/uni-share/package.json
Normal file
@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "uni-share",
|
||||
"displayName": "uni-share",
|
||||
"version": "2.0.2",
|
||||
"description": "底部弹出宫格图标式的分享菜单，可覆盖原生组件。",
|
||||
"keywords": [
|
||||
"分享菜单"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"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": "n",
|
||||
"Android Browser": "n",
|
||||
"微信浏览器(Android)": "n",
|
||||
"QQ浏览器(Android)": "n"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "n",
|
||||
"IE": "n",
|
||||
"Edge": "n",
|
||||
"Firefox": "n",
|
||||
"Safari": "n"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "n",
|
||||
"阿里": "n",
|
||||
"百度": "n",
|
||||
"字节跳动": "n",
|
||||
"QQ": "n"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
95
uni_modules/uni-share/readme.md
Normal file
95
uni_modules/uni-share/readme.md
Normal file
@ -0,0 +1,95 @@
|
||||
#### 本功能基于[底部图标菜单](https://ext.dcloud.net.cn/plugin?id=4858)封装而成。
|
||||
### 示例代码
|
||||
```
|
||||
<template>
|
||||
<button type="default" @click="uniShare">显示</button>
|
||||
</template>
|
||||
<script>
|
||||
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
|
||||
export default {
|
||||
onBackPress({from}) {
|
||||
console.log(from);
|
||||
if(from=='backbutton'){
|
||||
this.$nextTick(function(){
|
||||
uniShare.hide()
|
||||
})
|
||||
return uniShare.isShow;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uniShare() {
|
||||
uniShare.show({
|
||||
content: { //公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
|
||||
type: 0,
|
||||
href: 'https://uniapp.dcloud.io/',
|
||||
title: '标题',
|
||||
summary: '描述',
|
||||
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
|
||||
},
|
||||
menus: [{
|
||||
"img": "/static/app-plus/sharemenu/wechatfriend.png",
|
||||
"text": "微信好友",
|
||||
"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneSession"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/wechatmoments.png",
|
||||
"text": "微信朋友圈",
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneTimeline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/mp_weixin.png",
|
||||
"text": "微信小程序",
|
||||
"share": {
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
miniProgram: {
|
||||
id: '123',
|
||||
path: '/pages/list/detail',
|
||||
webUrl: '/#/pages/list/detail',
|
||||
type: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/weibo.png",
|
||||
"text": "微博",
|
||||
"share": {
|
||||
"provider": "sinaweibo"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/qq.png",
|
||||
"text": "QQ",
|
||||
"share": {
|
||||
"provider": "qq"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/copyurl.png",
|
||||
"text": "复制",
|
||||
"share": "copyurl"
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/more.png",
|
||||
"text": "更多",
|
||||
"share": "shareSystem"
|
||||
}
|
||||
],
|
||||
cancelText: "取消分享",
|
||||
}, e => { //callback
|
||||
console.log(uniShare.isShow);
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
Loading…
x
Reference in New Issue
Block a user