123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625 |
- <template>
- <view class="">
- <view class="header">
- <image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
- <view class="info-block flex-row-between">
- <view class="info">
- <view class="title">智能替换</view>
- <view class="desc">请上传高质量原图图片,以便更好的识别替换</view>
- </view>
- </view>
- </view>
- <view class="main">
- <view class="box-pack-between ft32 item flex-y-center pd40">
- <text>上传原图 <text style="color:red">*</text> <text class="tips"></text></text>
- <image v-if="Original_img" @click="ChooseImage" :data-type="1" class="qrupimg" :src="URL+''+Original_img" mode="aspectFit"></image>
- <image v-else @click="ChooseImage" :data-type="1" class="qrupimg" src="../../static/images/upimg.png" mode="aspectFit"></image>
- </view>
- <view class="box-pack-between ft32 flex-y-center header-tab">
- <view class="flex-grow-11 flex-center" @click="bindOriginal" :class="make_type==1?'act':''">快速模式</view>
- <view class="flex-grow-11 flex-center" @click="bindOrigina2" :class="make_type==2?'act':''">高级模式</view>
- <!-- <view class="flex-center ft24">
- <switch :checked="make_type==1?true:false" name="is_real" @change="bindOriginal" style="transform:scale(0.7)" />
- </view> -->
- </view>
- <block v-if="make_type==2">
- <view class="item-bg pd40">
- <view class="box-pack-between ">
- <text>配置替换</text>
- <picker @change="bindPickerAdvertising" :range="Advertising">
- <text class="col">{{Advertising[Adver_index]}} <text class="iconfont icon-prev"></text></text>
- </picker>
- </view>
- <view class="item-pd20 box-pack-between flex-y-center" v-if="Adver_index==0">
- <view class="flex-grow-0">二维码(扫码/相册选取)</view>
- <image v-if="code_img" @click="bindCode" class="qrupimg_end" src="../../static/images/pay_bz.png" mode=""></image>
- <image v-else @click="bindCode" class="qrupimg_end" src="../../static/images/saoma.png" mode=""></image>
- </view>
- <navigator hover-class="none" url="../enabling/enabling" class="box-pack-between flex-y-center item-pd20" v-if="Adver_index==1">
- <text style="min-width: 150rpx;">{{$test.$test}}记录</text>
- <view class="col flex-y-center">
- <view class="content" v-if="code_url">
- {{code_url}}
- </view>
- <text v-else>请选择{{$test.$test}}记录</text>
- <text class="iconfont icon-prev"></text>
- </view>
- </navigator>
- <view class="box-pack-between flex-y-center item-pd20" v-if="Adver_index==2">
- <text style="min-width: 150rpx;">链接地址</text>
- <input maxlength="5000" @input="address" :value="code_url" adjust-position="false"
- placeholder="请输入链接" class="tr"></input>
- </view>
- </view>
- </block>
- <view v-else class="pd40">
- <view class="">
- <view class="box-pack-between ft32 item" style="padding-top:0;">
- <text>{{$test.$test}}场景 </text>
- <view class="add-home flex-center ft24">
- <picker @change="bindPickerChange" :range-key="'name'" :range="allwayList">
- 添加
- </picker>
- </view>
- </view>
- <view class="item-bg" v-if="arr.length>0">
- <view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of arr" :key='item.id'>
- <view class="flex-y-center flex-grow-1 pdr-20">
- <text style="margin-right: 10rpx;">{{item.name}}</text>
- <input class="flex-grow-1" type="text" @input="getScene"
- :data-index="index" placeholder="请填写链接或内容" :value="item.way_power" />
- </view>
- <image class="item-del" @click="delScene" :data-index='index' src="../../static/images/del.png" mode=""></image>
- </view>
- </view>
- </view>
- <view class="box-pack-between ft32 item flex-y-center">
- <text>开启遮盖指引</text>
- <view class="flex-center ft24">
- <switch :checked="hj_state==1?true:false" @change="bindHj" style="transform:scale(0.7)" />
- </view>
- </view>
- </view>
- <view class="tips pd40" style="margin-top: 20rpx;">
- ps:本功能目前处于尝鲜阶段,成功率并不是100%,后续将不断优化二维码替换成功率。
- </view>
- </view>
- <view class="btm-btn-replace">
- <view class="btm-btn" @click="Confirm">{{card_num?'修改替换':'确认替换'}}</view>
- </view>
- </view>
- </template>
- <script>
- // #ifdef H5
- import getWXSign from "@/static/js/config.js";
- // #endif
- export default {
- data() {
- return {
- $test: this.$test.$test,
- Advertising: ["二维码", `${this.$test.$test}记录`, "链接"],
- Adver_index: 0,
- URL: getApp().globalData.URL,
- Original_img: "",
- code_img: "",
- save_url: "",
- code_url:"",
- make_type: 1,
- allwayList: [],
- arr: [],
- hj_state: 2,
- info: {},
- type:"",
- }
- },
- onLoad(e) {
- this.card_num = e.card_num;
- this.allways();
- },
- onShow(e) {
- },
- methods: {
- bindHj(e) {
- this.hj_state = e.target.value ? 1 : 2;
- },
- bindOriginal(e) {
- this.make_type = 1;
- },
- bindOrigina2(e) {
- this.make_type = 2;
- },
- bindPickerChange: function(e) {
- console.log(e, this.allwayList, "bindPickerChange", )
- if (this.arr.length > 0) {
- for (let i of this.arr) {
- if (i.id == this.allwayList[e.target.value].id) {
- uni.showToast({
- title: "场景重复",
- icon: 'none'
- })
- return
- }
- }
- }
- this.arr.push({
- id: this.allwayList[e.target.value].id,
- name: this.allwayList[e.target.value].name,
- super_id: this.allwayList[e.target.value].super_id,
- });
- },
- allways() {
- this.request({
- url: "funeng/allways",
- data: {},
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.allwayList = res.data;
- this.arr.push({
- id: res.data[0].id,
- name: res.data[0].name,
- super_id: res.data[0].super_id,
- });
- if (this.card_num) {
- this.edit_detail();
- }
- }
- }).catch((res) => {});
- },
- edit_detail(e) {
- this.request({
- url: "picture/edit_detail",
- data: {
- card_num: this.card_num,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.info = res.data;
- this.Original_img = res.data.bg;
- this.make_type = res.data.make_type;
- this.type=res.data.is_video==1?6:0;
-
- if (res.data.make_type == 1) {
-
- this.save_url =res.data.url;
- this.arr = res.data.funeng;
- this.hj_state = res.data.hj_state;
-
- } else {
-
- if(res.data.type==1){
- this.code_img=true;
- }
- this.code_url =res.data.url;
- this.Adver_index = Number(res.data.type) - 1;
- this.arr = [];
- this.hj_state = 2;
-
-
-
- }
- // this.allmuban();
- // make_type
- }
- }).catch((res) => {
- });
- },
- qr_del(e) {
- var index = e.currentTarget.dataset.index;
- this.qr_arr.splice(index, 1)
- },
- getScene(e) {
- var index = e.currentTarget.dataset.index;
- this.arr[index].way_power = e.detail.value;
- },
- delScene(e) {
- var index = Number(e.currentTarget.dataset.index);
- this.arr.splice(index, 1);
- },
- bindPickerAdvertising(e) {
- this.save_url = "";
- this.code_url="";
- this.Adver_index = e.detail.value;
- },
- address(e) {
- this.code_url = e.detail.value;
- },
- bindCode(e) {
- console.log(e, "bangCode")
- // #ifdef MP-WEIXIN
- uni.scanCode({
- success: (res) => {
- console.log('条码类型:' + res.scanType);
- console.log('条码内容:' + res.result);
- this.code_img = true;
- this.code_url = res.result;
- }
- });
- // #endif
- // #ifdef H5
- getWXSign().then(res => {
- console.log('wx_getLocation');
- this.$wx.scanQRCode({
- needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
- scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
- success: (res) => {
- console.log(res, "qrCode")
- this.code_url = res.resultStr;
- this.code_img = true;
- }
- })
- })
- // #endif
- },
- ChooseImage(e) {
- console.log(e, "rrr")
- let type = e.currentTarget.dataset.type;
- uni.chooseImage({
- count: 1, //默认9
- sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
- sourceType: ['album'], //从相册选择
- success: (res) => {
- res.tempFilePaths.forEach((v, i) => {
- console.log(v)
- this.Upload({
- url: "Spread/upload_img",
- data: {
- url: v,
- type: 1,
- token: uni.getStorageSync("token"),
- }
- }).then(res => {
- console.log(res, "res")
- // if (this.make_type==1) {
- this.Original_img = res.file;
- this.save_url = res.url;
- // } else {
- // this.Original_img = res.file;
- // this.save_url ="";
- // }
- }).catch(err => {
- console.log(err, "err")
- this.Original_img = err.data.file;
- uni.showModal({
- title: '提示',
- content: '上传图片里的二维码无法识别,请重新上传原图',
- showCancel: false,
- confirmText: '再试一次',
- success: res => {
- if (res.confirm) {
- // #ifdef MP-WEIXIN
- uni.scanCode({
- success: (res) => {
- console.log('条码类型:' + res.scanType);
- console.log('条码内容:' + res.result);
- this.save_url = res.result;
- }
- });
- // #endif
- // #ifdef H5
- getWXSign().then(res => {
- console.log('wx_getLocation');
- this.$wx.scanQRCode({
- needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
- scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
- success: (res) => {
- console.log(res, "qrCode")
- this.save_url = res.resultStr;
- }
- })
- })
- // #endif
- }
- },
- fail: () => {},
- complete: () => {}
- });
- });
- })
- },
- });
- },
- Confirm(e) {
- let arr = this.arr,
- qr_arr = this.qr_arr,
- way_id = [],
- way_power = [];
- for (let i of arr) {
- way_id.push(i.id);
- way_power.push(i.way_power)
- }
- if (this.make_type == 1 && way_power.length <= 0) {
- uni.showToast({
- title: "场景为空",
- icon: 'none'
- })
- return
- }
- if (!this.Original_img) {
- uni.showToast({
- title: "请上传原图",
- icon: "none"
- })
- return false
- }
- this.request({
- url: "picture/save",
- data: {
- id: this.card_num ? this.info.id : "",
- bg: this.Original_img,
- type: Number(this.Adver_index) + 1,
- url: this.make_type==1?this.save_url:this.code_url,
- make_type: this.make_type,
- token: uni.getStorageSync("token"),
- is_video:this.type==6?1:2,
- way_id: way_id.join(","),
- way_power: way_power.join(","),
- hj_state: this.hj_state,
- },
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- let qrcode = res.data.data;
- uni.setStorageSync("qrcode", qrcode);
- uni.redirectTo({
- url: "./results?typpe=1"
- })
- }
- }).catch((res) => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- }
- }
- }
- </script>
- <style>
- .content {
- word-wrap: break-word;
- word-break: break-all;
- }
- .qrupimg_end {
- width: 80rpx;
- height: 80rpx;
- }
- .header {
- width: 100%;
- height: 198rpx;
- position: relative;
- }
- .header .bg-img {
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- z-index: -1;
- width: 100%;
- height: 198rpx;
- }
- .header .info-block {
- padding: 0 40rpx 0 48rpx;
- height: 198rpx;
- }
- .header .info-block .title {
- font-size: 36rpx;
- color: #fff;
- font-weight: 500;
- line-height: 50rpx;
- }
- .header .info-block .desc {
- font-size: 28rpx;
- font-weight: 500;
- color: #fff;
- line-height: 40rpx;
- margin-top: 8rpx;
- }
- .header .info-block .btn {
- width: 120rpx;
- height: 56rpx;
- border: 2rpx solid #fff;
- border-radius: 28rpx;
- background-color: rgba(255, 255, 255, 0.2);
- text-align: center;
- line-height: 52rpx;
- font-size: 28rpx;
- font-weight: 500;
- color: #fff;
- }
- .col {
- color: #999999;
- }
- .item {
- padding: 30rpx 0;
- /* border-bottom: 1rpx solid #F1F1F1; */
- }
- .header-tab {
- height: 100rpx;
- background: #F1F1F1;
- font-size: 28rpx;
- margin-top: 50rpx;
- padding: 0 20px;
- margin-bottom: 60rpx;
- }
- .header-tab .flex-grow-11 {
- width: 40%;
- height: 79%;
- }
- .header-tab .act {
- color: #3387ff;
- background: #fff;
- border-radius: 8rpx;
- }
- .add-home {
- color: #FFFFFF;
- width: 126rpx;
- height: 54rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- }
- .item-bg {
- width: 670rpx;
- background: #f6f8fe;
- border-radius: 12rpx;
- margin: 0 auto;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #333333;
- padding: 36rpx 32rpx;
- }
- .main {
- background-color: #fff;
- border-radius: 20rpx 20rpx 0 0;
- margin-top: -20rpx;
- padding: 20rpx 0rpx 0;
- }
- .pd40 {
- padding: 0rpx 40rpx;
- }
- .qrupimg {
- width: 126rpx;
- height: 126rpx;
- }
- .headerMind {
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- color: #333333;
- padding: 44rpx 0 32rpx 0;
- }
- .item-pd20 {
- padding: 50rpx 0 20rpx 0;
- }
- .tr {
- text-align: right;
- }
- .btm-btn-replace {
- width: 100%;
- margin-top: 100rpx;
- }
- .btm-btn {
- width: 670rpx;
- height: 98rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- font-size: 32rpx;
- font-weight: 500;
- text-align: center;
- color: #fff;
- line-height: 98rpx;
- margin: 0 auto;
- margin-top: 50rpx;
- }
- .tips {
- font-size: 26rpx;
- color: #999;
- }
- .item-bg {
- width: 670rpx;
- /* height: 298rpx; */
- background: #f6f8fe;
- border-radius: 12rpx;
- margin: 0 auto;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #333333;
- padding: 36rpx 32rpx;
- }
- .item-del {
- width: 40rpx;
- height: 40rpx;
- }
- .mar64 {
- margin-bottom: 64rpx;
- }
- .item-bg .mar64:last-child {
- margin-bottom: 0rpx;
- }
- .hg200rpx {
- height: 100rpx;
- }
- .mgr57 {
- margin-bottom: 57rpx;
- }
- .item-bg-32 {
- margin-right: 32rpx;
- }
- </style>
|