123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386 |
- <template>
- <view class="container">
- <view class="desc-info" v-if="promo.img || promo.promo_booth_desc">
- <image :src="promo.img" mode="widthFix" class="desc-info-img" @click="showImg(promo.img)"></image>
- <rich-text :nodes="promo.promo_booth_desc"></rich-text>
- </view>
- <form>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">状态</label>
- <view class="content">
- {{getStatusName(chaxun.biz_status)}}
- </view>
- </view>
- </view>
- <view class="form-item" v-if="chaxun.biz_status == 'CREATE_AUDIT_REJECT'">
- <view class="input-block flex box-pack-between">
- <label class="label">驳回原因</label>
- <view class="content">
- <rich-text :nodes="chaxun.reject_reason"></rich-text>
- </view>
- </view>
- </view>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">服务名称</label>
- <view class="content flex-grow-1 ">
- <input type="text" v-model="info.servicename" placeholder="请输入"
- class="input-box text-align-right" />
- </view>
- </view>
- <view class="tips">≤5个字;名称超字数的需要缩减,例如:高德打车、好师傅维修等;</view>
- </view>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">副标题</label>
- <view class="content flex-grow-1 ">
- <input type="text" v-model="info.subhead" placeholder="请输入"
- class="input-box text-align-right" />
- </view>
- </view>
- <view class="tips">5-6个字;简要描述或介绍服务功能或者优惠权益,例如:全网极速接驾、上门家具装</view>
- </view>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">卖点标签</label>
- <view class="content flex-grow-1 ">
- <input type="text" v-model="info.selling_tag" placeholder="请输入"
- class="input-box text-align-right" />
- </view>
- </view>
- <view class="tips">4-5个字;对营销利益点的提炼,例如:极速到家、送货上门、全场5折等;</view>
- </view>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">行动点</label>
- <view class="content flex-grow-1 ">
- <input type="text" v-model="info.action_point" placeholder="请输入"
- class="input-box text-align-right" />
- </view>
- </view>
- <view class="tips">≤4个字;引导用户点击的文案,例如:去看看、去点餐、去预订等。</view>
- </view>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">logo图</label>
- <view class="content ">
- <view class="image-block" :class="{'image-bg':!info.logo}" style="width:180rpx;height:180rpx"
- @click="uploadFile('logo')">
- <image :src="baseUrl+info.logo" mode="aspectFit" class="form-img" v-if="info.logo"></image>
- <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
- </image>
- </view>
- </view>
- </view>
- <view class="tips">【提报的logo图需要满足以下要求。<br />
- ● 图片尺寸:180*180(px);<br />
- ● 图片格式:png、jpg静态图片;<br />
- ● 图片大小:小于等于120kb;<br />
- ● 图片背景:不可透明;<br />
- ● 建议使用彩色背景反白logo,在实际展示尺寸中显示更清晰。】</view>
- </view>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">商家素材图(大图)</label>
- <view class="content ">
- <view class="image-block" :class="{'image-bg':!info.large_pic}"
- style="width:257rpx;height:171rpx" @click="uploadFile('large_pic')">
- <image :src="baseUrl+info.large_pic" mode="aspectFit" class="form-img"
- v-if="info.large_pic"></image>
- <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
- </image>
- </view>
- </view>
- </view>
- <view class="tips">【大卡图
- <br />提报的大卡图需要满足以下要求:
- <br />● 图片尺寸:大卡图514*342 (px);
- <br />● 图片格式:场景化图片要求PNG格式,独立元素图片要求JPG格式;
- <br />● 需要为商品实物/人物/实景图,不允许插画图;
- <br />● 图片需要体现小程序/服务本身特点,例如:茶饮点餐,图片建议为奶茶商品图。】
- </view>
- </view>
- <view class="form-item">
- <view class="input-block flex box-pack-between">
- <label class="label">商家素材图(小图)</label>
- <view class="content ">
- <view class="image-block" :class="{'image-bg':!info.small_pic}"
- style="width:258rpx;height:310rpx;" @click="uploadFile('small_pic')">
- <image :src="baseUrl+info.small_pic" mode="aspectFit" class="form-img"
- v-if="info.small_pic"></image>
- <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
- </image>
- </view>
- </view>
- </view>
- <view class="tips">【小卡图
- <br />提报的小卡图需要满足以下要求:
- <br />● 图片尺寸:小卡图258*310 (px);
- <br />● 图片格式:场景化图片要求PNG格式,独立元素图片要求JPG格式;
- <br />● 需要为商品实物/人物/实景图,不允许插画图;
- <br />● 图片需要体现小程序/服务本身特点,例如:茶饮点餐,图片建议为奶茶商品图。】
- </view>
- </view>
- <!-- v-if="['AUDITED','CREATE_AUDIT_REJECT','EDIT_AUDIT_REJECT',''].includes(chaxun.biz_status)" -->
- <view class="sub-btn"
- @click="onSubmit">立即提交</view>
-
-
- </form>
- <view class="is-iphone-x"></view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- admin_id: '',
- info: {},
- chaxun: {},
- promo: {},
- baseUrl: getApp().globalData.URL
- }
- },
- onLoad() {
- this.admin_id = uni.getStorageSync('admin_id')
- this.getInfo()
- },
- methods: {
- getInfo() {
- this.request({
- url: 'alipaycoupon/sucai_info',
- data: {
- admin_id: this.admin_id
- }
- }).then(res => {
- if (res.code == 200) {
- console.log(res)
- this.info = res.data.info
- this.chaxun = res.data.chaxun
- this.promo = res.data.promo
- }
- })
- },
- uploadFile(type) {
- uni.chooseMedia({
- count: 1,
- mediaType: ['image'],
- success: (res) => {
- console.log(res)
- let tempFilePath = res.tempFiles[0].tempFilePath
- uni.uploadFile({
- url: getApp().globalData.URL + '/api/alipaycoupon/upload',
- filePath: tempFilePath,
- name: 'file',
- formData: {
- type,
- admin_id: uni.getStorageSync('admin_id')
- },
- success: (r) => {
- console.log(r);
- if (r.statusCode == 200) {
- let data = JSON.parse(r.data)
- console.log(data)
- if (data.code == 200) {
- this.info[type] = data.data.src
- } else {
- uni.showToast({
- title: data.message,
- icon: "none"
- })
- }
- } else {
- uni.showToast({
- title: "上传失败,请重试",
- icon: "none"
- })
- }
- }
- });
- }
- })
- },
- showImg(src) {
- uni.previewImage({
- urls: [src]
- })
- },
- getStatusName(status) {
- let name = ""
- switch (status) {
- case "CREATE_AUDITING":
- name = "新增审核中"
- break;
- case "EDIT_AUDITING":
- name = "修改审核中"
- break;
- case "AUDITED":
- name = "审核通过"
- break;
- case "CREATE_AUDIT_REJECT":
- name = "新增驳回"
- break;
- case "EDIT_AUDIT_REJECT":
- name = "修改驳回"
- break;
- }
- return name
- },
- onLeimuChange(e) {
- this.info.category_id = this.leimuList[e.detail.value].code
- this.getCategoryName(this.leimuList[e.detail.value].code)
- },
- onChangeTime(e, name) {
- this.info[name] = e.detail.value
- },
- onSubmit(e) {
- let params = {
- admin_id: this.admin_id,
- id: this.info.id,
- servicename: this.info.servicename,
- subhead: this.info.subhead,
- selling_tag: this.info.selling_tag,
- action_point: this.info.action_point,
- logo: this.info.logo,
- large_pic: this.info.large_pic,
- small_pic: this.info.small_pic,
- }
- this.request({
- url: 'alipaycoupon/sucai',
- data: params
- }).then(res => {
- if (res.code == 200) {
- uni.showModal({
- content: "提交成功",
- showCancel: false,
- success: (r) => {
- this.getInfo()
- }
- })
- } else {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- }
- }).catch(res => {
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- })
- }
- }
- }
- </script>
- <style>
- page {
- background-color: #f4f5f6;
- }
- </style>
- <style lang="scss" scoped>
- @import url("@/static/css/flex.css");
- .container {
- background-color: #f4f5f6
- }
- .desc-info {
- padding: 20rpx;
- font-size: 26rpx;
- line-height: 1.5;
- }
- .desc-info-img {
- display: block;
- width: 100%;
- }
- .text-align-right {
- text-align: right;
- }
- .form-item {
- padding: 20rpx 20rpx;
- font-size: 28rpx;
- line-height: 1.5;
- margin-bottom: 20rpx;
- background: #fff;
- word-break: break-all;
- .input-block {}
- .label {
- flex: none;
- display: block;
- padding-right: 30rpx;
- }
- .content {}
- .input-box {
- width: 100%;
- }
- .tips {
- font-size: 24rpx;
- color: #f00;
- line-height: 1.5;
- border-top: 1rpx solid #f2f2f2;
- margin-top: 20rpx;
- padding-top: 15rpx;
- }
- .image-bg {
- background-color: #f4f5f6;
- }
- .image-block {
- overflow: hidden;
- border-radius: 12rpx;
- position: relative;
- .form-img {
- display: block;
- width: 100%;
- height: 100%;
- }
- .form-img-add-btn {
- display: block;
- width: 100rpx;
- height: 100rpx;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- }
- }
- .sub-btn {
- width: 700rpx;
- height: 100rpx;
- background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
- border-radius: 8rpx;
- box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
- text-align: center;
- line-height: 100rpx;
- font-size: 36rpx;
- font-weight: 500;
- color: #fff;
- margin: 0 auto;
- }
- </style>
|