diff --git a/api/api.js b/api/api.js index 3daf575..b0c8f23 100644 --- a/api/api.js +++ b/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 }); } \ No newline at end of file diff --git a/components/areaWindow/index.vue b/components/areaWindow/index.vue index 13797f3..d217e3a 100644 --- a/components/areaWindow/index.vue +++ b/components/areaWindow/index.vue @@ -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() { diff --git a/components/release/release.vue b/components/release/release.vue new file mode 100644 index 0000000..8bd80f2 --- /dev/null +++ b/components/release/release.vue @@ -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> \ No newline at end of file diff --git a/components/shoppinglist/shoppinglist.vue b/components/shoppinglist/shoppinglist.vue new file mode 100644 index 0000000..0af82a1 --- /dev/null +++ b/components/shoppinglist/shoppinglist.vue @@ -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> \ No newline at end of file diff --git a/components/subtractive/subtractive.vue b/components/subtractive/subtractive.vue new file mode 100644 index 0000000..8ee625e --- /dev/null +++ b/components/subtractive/subtractive.vue @@ -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> \ No newline at end of file diff --git a/components/villageTeam/villageTeam.vue b/components/villageTeam/villageTeam.vue new file mode 100644 index 0000000..0cd0015 --- /dev/null +++ b/components/villageTeam/villageTeam.vue @@ -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> diff --git a/config/app.js b/config/app.js index 2eae9d4..1284abe 100644 --- a/config/app.js +++ b/config/app.js @@ -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' diff --git a/pages.json b/pages.json index 62b545c..83381a8 100644 --- a/pages.json +++ b/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", diff --git a/pages/trading_hall/adddiscounts/index.vue b/pages/trading_hall/adddiscounts/index.vue new file mode 100644 index 0000000..d1a28a4 --- /dev/null +++ b/pages/trading_hall/adddiscounts/index.vue @@ -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> \ No newline at end of file diff --git a/pages/trading_hall/product_details/index.vue b/pages/trading_hall/product_details/index.vue new file mode 100644 index 0000000..db78bd5 --- /dev/null +++ b/pages/trading_hall/product_details/index.vue @@ -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> \ No newline at end of file diff --git a/pages/users/online_warehousing/index.vue b/pages/users/online_warehousing/index.vue index 968e232..38c6fb1 100644 --- a/pages/users/online_warehousing/index.vue +++ b/pages/users/online_warehousing/index.vue @@ -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> \ No newline at end of file diff --git a/pages/users/order_list/index.vue b/pages/users/order_list/index.vue index 99e989b..79bb8e2 100644 --- a/pages/users/order_list/index.vue +++ b/pages/users/order_list/index.vue @@ -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; diff --git a/pages/users/order_list/indexCopy.vue b/pages/users/order_list/indexCopy.vue index 496ccd8..936566b 100644 --- a/pages/users/order_list/indexCopy.vue +++ b/pages/users/order_list/indexCopy.vue @@ -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; diff --git a/pages/users/releaseOrdermanagement/index.vue b/pages/users/releaseOrdermanagement/index.vue new file mode 100644 index 0000000..bc5b404 --- /dev/null +++ b/pages/users/releaseOrdermanagement/index.vue @@ -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> \ No newline at end of file diff --git a/pages/users/trading_hall/index.vue b/pages/users/trading_hall/index.vue index 1509485..e4c4770 100644 --- a/pages/users/trading_hall/index.vue +++ b/pages/users/trading_hall/index.vue @@ -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> \ No newline at end of file diff --git a/pages/users/user_address/index.vue b/pages/users/user_address/index.vue index 6a49cd2..4f48e4b 100644 --- a/pages/users/user_address/index.vue +++ b/pages/users/user_address/index.vue @@ -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 diff --git a/static/images/arrow-bottom.png b/static/images/arrow-bottom.png new file mode 100644 index 0000000..25a4aa8 Binary files /dev/null and b/static/images/arrow-bottom.png differ diff --git a/static/images/discounts.png b/static/images/discounts.png new file mode 100644 index 0000000..9b5ff9c Binary files /dev/null and b/static/images/discounts.png differ diff --git a/static/images/season.png b/static/images/season.png new file mode 100644 index 0000000..d2568dd Binary files /dev/null and b/static/images/season.png differ diff --git a/static/images/serchbtn.png b/static/images/serchbtn.png new file mode 100644 index 0000000..d6138db Binary files /dev/null and b/static/images/serchbtn.png differ diff --git a/static/images/sym.png b/static/images/sym.png new file mode 100644 index 0000000..8e4d962 Binary files /dev/null and b/static/images/sym.png differ diff --git a/static/images/trad-add.png b/static/images/trad-add.png new file mode 100644 index 0000000..6a6d1ae Binary files /dev/null and b/static/images/trad-add.png differ diff --git a/static/images/trad-close.png b/static/images/trad-close.png new file mode 100644 index 0000000..88a1167 Binary files /dev/null and b/static/images/trad-close.png differ diff --git a/uni_modules/uni-share/changelog.md b/uni_modules/uni-share/changelog.md new file mode 100644 index 0000000..c858c67 --- /dev/null +++ b/uni_modules/uni-share/changelog.md @@ -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版发布 diff --git a/uni_modules/uni-share/js_sdk/uni-image-menu.js b/uni_modules/uni-share/js_sdk/uni-image-menu.js new file mode 100644 index 0000000..c03e51b --- /dev/null +++ b/uni_modules/uni-share/js_sdk/uni-image-menu.js @@ -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 \ No newline at end of file diff --git a/uni_modules/uni-share/js_sdk/uni-share.js b/uni_modules/uni-share/js_sdk/uni-share.js new file mode 100644 index 0000000..8af8631 --- /dev/null +++ b/uni_modules/uni-share/js_sdk/uni-share.js @@ -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 \ No newline at end of file diff --git a/uni_modules/uni-share/package.json b/uni_modules/uni-share/package.json new file mode 100644 index 0000000..fa43a0e --- /dev/null +++ b/uni_modules/uni-share/package.json @@ -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" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/uni-share/readme.md b/uni_modules/uni-share/readme.md new file mode 100644 index 0000000..dced6d6 --- /dev/null +++ b/uni_modules/uni-share/readme.md @@ -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> + +``` \ No newline at end of file